[Compiler Optimization]: avoid memoizing `useState` lazy initializer functions

[imjordanxd]

What kind of issue is this?

• [X] 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/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYhBABQAOMEVYyRwmAhgLYLJg4x6YDmAXwCUTIgB1iROIW5EA2txY4EAXSIBeIgCUELXADooYBAGUcyhBQqiNAPiaSizojAQ5YxTAgDuRACosANYIYAAyhPz+eBz+EADCEGxUUCrUtPQGrBzCTkQiANx5bh4wxEoqWewIRZiCkpJwADYsYGABwaERAtGxCUkpKo5S2ZzcvAK1zjKY41C4EDAUo6LAec5oi0QUTe5EeJpEAAwF+wDUZ6cHADxEAIwIAGyr+etEOAAWeGBVHIejU1edRAgiAA

Repro steps

1. call useState with the lazy state initialiser that consumes props
2. observe the function is being cached in the compiled code despite it only ever being called once

However, I'm not 100% sure this is valid React code as the docs state:

If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state. See an example below.

But this does seem like a valid use-case.

How often does this bug happen?

Every time

What version of React are you using?

version in playground

What version of React Compiler are you using?

version in playground

[josephsavona]

Thanks for posting. Note that React will only call the initializer function once. It's perfectly fine for the compiler to cache it, but you're right that it's not strictly necessary. The memoization here is fine from a correctness perspective and hasn't been a problem in practice so it is simply a potential optimization to avoid memoizing the value.

We have a pass that prunes memoization for non-escaping values, and we would approach this by teaching that pass about lazy state initializers.

[stipsan]

I think there's a similar opportunity for useSyncExternalStore and getSnapshot + getServerSnapshot, as only subscribe needs to be memoized 🙌

[hernandemonteiro]

From your description, this issue primarily falls under React Compiler Core since it seems related to how React's compiler is handling your lazy initializer function, specifically that it’s caching it unexpectedly in the compiled output. This behavior causes the function to persist unnecessarily, which could be an unintended compiler optimization issue impacting the functionality of the component.

Key Points from Your Issue:

• Lazy State Initialization: You're using a lazy initializer function in useState that consumes props.
• Compiler Behavior: The compiler appears to cache this function in the output even though it should only execute once upon initial render, per React's expected behavior for lazy initializers.
• Unclear Validity: Since the useState documentation suggests that lazy initializers should be pure and parameterless, using props here may be technically outside the intended use case for React. However, you’re correct that such a pattern can be practical in certain cases.