Skip to content

Commit 8e96f38

Browse files
committed
Add more details to compiler debugging section
Upstreams some information from reactwg/react-compiler#7 since things like the temporary "use no memo" directive were not documented here ghstack-source-id: a02d138 Pull Request resolved: #6896
1 parent 92af3bc commit 8e96f38

File tree

1 file changed

+21
-2
lines changed

1 file changed

+21
-2
lines changed

src/content/learn/react-compiler.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -368,12 +368,31 @@ You can also provide feedback in the React Compiler Working Group by applying to
368368

369369
This occurs during JavaScript module evaluation when you are not using React 19 Beta and up. To fix this, [upgrade your app to React 19 Beta](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) first.
370370

371+
If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible.
372+
371373
### Debugging {/*debugging*/}
372374

373375
#### Checking if components have been optimized {/*checking-if-components-have-been-optimized*/}
374-
##### React DevTools {/*react-devtools*/}
375376

376-
React Devtools (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
377+
[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
378+
379+
#### Something is throwing an error or not working after compilation {/*something-is-throwing-an-error-or-not-working-after-compilation*/}
380+
If there's a runtime issue, first try to make the error or bug go away by aggressively opting out any component or hook you think might be related via the `"use no memo"` directive:
381+
382+
```js {2}
383+
function SuspiciousComponent() {
384+
"use no memo"; // opts out this component from being compiled by React Compiler
385+
// ...
386+
}
387+
```
388+
389+
<Note>
390+
#### `"use no memo"` {/*use-no-memo*/}
391+
392+
`"use no memo"` is a _temporary_ escape hatch that lets you opt-out components and hooks from being compiled by the React Compiler. This directive is not meant to be long lived the same way as eg [`"use client"`](/reference/rsc/use-client) is.
393+
</Note>
394+
395+
When you make the error go away, confirm that removing the opt out directive makes the error come back. Then share a bug report with us (you can try to reduce it to a small repro, or if it's open source code you can also just paste the entire source) using the [React Compiler Playground](https://playground.react.dev) so we can identify and help fix the issue.
377396

378397
##### Other issues {/*other-issues*/}
379398

0 commit comments

Comments
 (0)