You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior.
**Compiler errors**occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail.
**Runtime issues**occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped.
When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur.
## Common Breaking Patterns {/*common-breaking-patterns*/}
30
+
## 一般的な違反パターン {/*common-breaking-patterns*/}
31
31
32
-
One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates.
If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues)repository with:
Use`"use no memo"`to isolate whether an issue is compiler-related:
57
+
問題がコンパイラによるものかを切り分けるために`"use no memo"`を使用します。
58
58
59
59
```js
60
60
functionProblematicComponent() {
@@ -63,31 +63,31 @@ function ProblematicComponent() {
63
63
}
64
64
```
65
65
66
-
If the issue disappears, it's likely related to a Rules of React violation.
66
+
これで問題が解決する場合は、React のルール違反が原因である可能性が高いです。
67
67
68
-
You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed.
0 commit comments