[Compiler Bug]: "use no memo" Directive ignored by React Compiler Playground

[piotrski]

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/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAwhALYAOhCmOAFAJRHAA6xRrIUYCRmEIuQTkIXANzsiROITA4iAbVlYcAGiK8cZVQF0iAXiI8EAZRwBDHAnoAGRpI4wEOWMQA8AEzwA3AHzAKnQAvu4A9N7+jsEgwUA

Repro steps

To reproduce the issue, create a simple React component and add the "use no memo" directive at the top of the function, like this:

function Component() {
  "use no memo";
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

Even though the directive is there, the component still gets compiled, which shouldn’t happen according to the documentation. I’ve also tried placing the directive at the top of the file, and the behavior doesn't change.

To confirm, I tested this in different components and even in a fresh project, but the components keep getting compiled regardless of the directive.

The same result appears in the React Compiler Playground, showing that the "use no memo" directive is being ignored.

How often does this bug happen?

Every time

What version of React are you using?

19

What version of React Compiler are you using?

19.0.0-beta-8a03594-20241020

[poteto]

I took a look and couldn't repro the issue. We do have tests covering this so I'm wondering if it's something with how your repo is setup. Could you share a repo with the repro instead?

[gsathya]

@piotrski how are you checking if the component is compiled or not? using the devtools or manually inspecting the source?

[amarant]

I think OP talks about the playground result, you can clearly see that the component has been transformed by the react compiler.

[gsathya]

The directive doesn't work on the playground.

[piotrski]

I was discussing ESLint and Playground, and I find the Playground behavior misleading. When you choose opt out using "use no memo" directive, ESLint should respect that and not throw errors, as it seems illogical to me Current behavior seams a bit confusing.

[poteto]

The eslint plugin doesn't follow "use no memo" because that's a compiler only directive. If it did, you wouldn't see any rules of React violations in that file/function any more which would be contrary to the point of the linter. If you really need to disable the compiler linter (not recommended, of course), you can do that with a regular eslint suppression.

Your feedback about the playground is fair though, we should probably support it there

[poteto]

@piotrski would you be interested in adding support for this in the compiler playground?

[piotrski]

@poteto sure, I can give it a shot!

[subbu963]

@poteto, @gsathya and @piotrski added a pull request to support the use memo and use no memo, etc directives in playground in my PR: #31561

Please check it once if it makes sense.

[subbu963]

@poteto in my PR, seems like some E2E tests I wrote were failing on the CI but working on my machine. Also, i missed the prettier pass :(. I fixed these two. How do i rerun the the compiler workflow on CI?