Convert anonymous functions to named ones (in development)

[eps1lon]

In Next.js, we currently transform anonymous functions in Hooks to named ones to provide better stack traces.

Before:

function Component() {
  const onClick = useCallback(() => { throw new Error('Boom!') }, [])
  return <button onClick={onClick}>Throw error</button>
}

produces this stack (with Owner Stacks):

at **
at Component (**)

After:

function Component() {
    const onClick = useCallback({
        "Component.useCallback[onClick]": ()=>[]
    }["Component.useCallback[onClick]"], []);
    return <button onClick={onClick}>Throw error</button>
}

produces this stack (with Owner Stacks):

at Component.useCallback[onClick] (**)
at Component (**)

With the React Compiler, we can no longer apply our current transform since it is not valid input for the React Compiler.
Adding names back after the Compiler is non-trivial.

If you just use the Compiler, you now also get named functions e.g. with the above example

import { c as _c } from "react/compiler-runtime";
function Component() {
  const $ = _c(1);
  const onClick = _temp;
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <button onClick={onClick}>Throw error</button>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}
function _temp() {
  throw new Error("Boom!");
}

produces this stack (with Owner Stacks):

at _temp (**)
at Component (**)

The React Compiler could have a separate transform for development that adds these names by using the same approach Next.js does e.g.

import { c as _c } from "react/compiler-runtime";
function Component() {
  const $ = _c(1);
  const onClick = _temp;
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <button onClick={onClick}>Throw error</button>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}
const _temp = {['Component.useCallback[onClick]']: () => {
  throw new Error("Boom!")
}}['Component.useCallback[onClick]']

This has the downside of creating temporal dead zones though this shouldn't affect runtime since none of the compiled code is executed during module evaluation.

Alternatively, Object.defineProperty can be used to keep the current hoisting behavior

import { c as _c } from "react/compiler-runtime";
function Component() {
  const $ = _c(1);
  const onClick = _temp;
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <button onClick={onClick}>Throw error</button>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}
function _temp() {
  throw new Error("Boom!");
}
Object.defineProperty(_temp, 'name', { value: 'Component.useCallback[onClick]' })

Note that _temp.name = '...' is not possible since Function.prototype.name is not writeable.

Detecting the pattern Next.js transforms to is also possible. Though we might not be able to leverage that depending on how our transpilation pipeline is structured. We wouldn't want to add another SWC pass right before Babel just for the names.

You can check out the fixtures in Next.js for this transform to get a better overview about how we currently determine the name of an anonymous function passed to Hooks.

Libraries can choose whether they want to ship with better names by default or ship separate entrypoints for dev and prod. For example, react-redux already ships named selectors with the same trick Next.js uses.

[josephsavona]

Interesting, the use of {['<name>']: () => { ... }}['<name>'] is so that you can use characters not allowed as identifier names? Or is there some other motivation?

In general the compiler could try to synthesize names for functions, but note that in general code won't even have a useCallback to start with.

[eps1lon]

Interesting, the use of {['']: () => { ... }}[''] is so that you can use characters not allowed as identifier names? Or is there some other motivation?

In this case, yes. We could've gone with underscores instead to produce valid identifiers e.g. Component_useCallback_onClick.

But it's also nice to not use function expressions since there's the theoretical risk of shadowing existing functions.

You can't be too wild with function names anyway to ensure all stack trace parsers are able to identify a function name in stackframes.

In general the compiler could try to synthesize names for functions, but note that in general code won't even have a useCallback to start with.

For the Compiler the more relevant Hooks would be e.g. useEffect. We transform those to

function Component() {
    useEffect({
        "Component.useEffect": ()=>{}
    }["Component.useEffect"]);
}

For callbacks the Compiler should probably just make an effort to preserve the original name as much as possible. E.g. const onClick = () => {} used to have the onClick function name but since it's now hoisted, it ends up as _temp.

[josephsavona]

I've implemented a similar transform in facebook/react#34410

[eps1lon]

@josephsavona Doesn't seem to work when combined with existing memoization e.g const handleClick = useCallback(...): https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAwgIYA21ARpXANYEC+BAZjBBgQOQwEjPHwA6AOwkco4uHjQRxBAEJQ8eRQApiGBGDCUA5gjYBKIhIIE4isIQAWlcQBNqFammYEAvCTJVaBmZNTXNvAD4LJSsCSzYAGgIAbV19IwQAXVMJONIEAFEODgQ5ELDI4DirG3FINwA6aghDTQBGbOjWRKSsnOjBPFglAB46NQ0lRXIPZm9gRxc3ac8mdgB6cIlWCRB4kBqONEMUdGxcQjwATywTYgAFaihDNHEAeSx5WzZObl4+BjoCGoAFosI9nuJgYJhMCbNg0G4YGtnGg7HwANx9bRxNZrOFYBGUT7iACyEGcCGQsRANGoohAcQQ4gAbmhuOJdOI8FTKtErEzKHQ3AA5Si6ACC4kUlww0DAADEZHIFLUqXgYFAEHFtuJ2AZ5GBDnoCA8ni93sSwKZ0btwPYIAB3ACSXIQMHENDAKA4noQrCAA

[josephsavona]

Thanks for the bug report, fixed in facebook/react#34586 :-)