Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
[Compiler Bug]: React Compiler does not compile module-level 'use memo' but compiles function-level 'use memo' | GoodFirstPicks

[Compiler Bug]: React Compiler does not compile module-level 'use memo' but compiles function-level 'use memo'

facebook/react 2 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeTest focusedReactJavaScriptTypeScript

Why this is a good first issue

Module-level directives not working as documented in React Compiler

AI Summary

The React Compiler fails to process module-level 'use memo' directives while working correctly with function-level ones. This contradicts documented behavior and requires investigation into directive parsing logic. The issue provides clear reproduction steps but may require deep compiler knowledge.

Issue Description

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-hooks (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/tryasko/test-react-compiler

Repro steps

Description

React Compiler compiles a component when 'use memo' is placed inside the function body, but does NOT compile the same component when 'use memo' is placed at the module level.

According to the documentation, module-level directives should apply to all functions in the file:

https://react.dev/reference/react-compiler/directives

"Place directives at the top of a file to affect all functions in that module."

However, in my setup, only function-level directives trigger compilation, while module-level directives are ignored.

Steps to reproduce

  1. Clone the repository: https://github.com/tryasko/test-react-compiler
  2. Install dependencies: npm i
  3. Run the compiler: npm start
  4. Inspect the generated files in the output directory.

Compilation result

Component fileDirective levelCompilationExpected result
component-a.jsxno directiveNot compiled✅ Expected
component-b.jsxfunction-levelCompiled✅ Expected
component-c.jsxmodule-levelNot compiled❌ Not expected

Expected behavior

React Compiler should compile components when 'use memo' is placed at the module level, the same way it does when the directive is placed at the function level.

Specifically, the output for component-c.jsx should include React Compiler transformations, such as:

import { c as _c } from "react/compiler-runtime";

GitHub Labels

Type: BugStatus: Unconfirmed

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 15 points when you complete it!

Risk Flags

  • compiler behavior
  • directive parsing
Loading labels...

Details

Points15 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedyes