Skip to content

[Compiler Bug]:  #31396

Open
Open
@stipsan

Description

@stipsan

What kind of issue is this?

  • React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAsghhADQlkBKCAZnaQgMICGANjwEZc4AawIBfAsxgQMBADogYCIXgUBuOQDtMOfEQJ4AFtLx4eCcZOmyFPCABMuYQ+q1aEAD12F7LLlB5CZihNODw0CE0CcgBPAEEsLAAKAEoiLQICOEiwQiVmAgBeegQmZlSNKIysnMIjEzMEewAxCDhSIpLKaiTqzNSigD4+zINjCFNzXqjR2YHCwYJ8gDp2mCVNPAB+ZeY20lSaEdmAVgAGM6OZ2czgY5vzLns0TQBzZEleMiubm7wYLhoHgvd4GGBQBA-X7iKGzFKwggAbT27TAAF0oSlKtV2ABRZjMBBhJLzRbAeoTRotfZgVJiOiIimTJqtVFolJuGZKPCwKIAHmeADclixCsB8mJBgAJBB8CAEADquB49j5AHohYNKmItCAxEA

Repro steps

The compiler assumes that ref.current is called during render when inside of useMemo(), even when useMemo is returning a callback that is only called in a useEffect and never during render. See playground for the code.

The most common use case for specifying a callback with useMemo instead of useCallback, is when the callback is wrapped in a debouncing technique, like lodash/throttle:

  const throttledFocus = useMemo(
    () =>
      throttle(
        () => ref.current?.focus(),
        500,
        {
          leading: false,
          trailing: true,
        },
      ),
    [focus],
  );

It's as if the compiler isn't differentiating the closure that returns the memoized value (and thus is indeed firing during render), and useMemo returning a callback 🤔

How often does this bug happen?

Every time

What version of React are you using?

^18.3.1

What version of React Compiler are you using?

19.0.0-beta-6fc168f-20241025

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions