escape-hatches/overview

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Escape hatches purpose and scope

Escape hatches let you step outside React and connect to external systems. Examples include focusing an input using the browser API, playing and pausing a non-React video player, or connecting to a remote server. Most application logic and data flow should not rely on escape hatches.

Compiler errors vs runtime issues

Compiler errors occur at build time and prevent code from compiling; they 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 React Compiler issues are runtime issues, typically happening when code violates the Rules of React in subtle ways that the compiler couldn't detect, causing the compiler to mistakenly compile a component it should have skipped.

React Compiler skips optimization for problematic code

React Compiler is designed to handle code that follows the Rules of React. When it encounters code that might break these rules, it safely skips optimization rather than risk changing the app's behavior.

Memoization-for-correctness breaks React Compiler

One of the main ways React Compiler can break an app is if the code was written to rely on memoization for correctness, meaning the app depends on specific values being memoized to work properly. Since the compiler may memoize differently than manual approaches, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates.

Use 'use no memo' to disable compilation for debugging

Add the directive "use no memo" at the top of a component to skip compilation for that component and isolate whether an issue is compiler-related. If the issue disappears, it's likely related to a Rules of React violation.

Remove manual memoization to test for Rules of React violations

Try removing manual memoization such as useMemo, useCallback, and memo from the problematic component to verify that the app works correctly without any memoization. If the bug still occurs when all memoization is removed, there is a Rules of React violation that needs to be fixed.

React Compiler debugging workflow

When debugging runtime behavior issues: (1) Identify the root cause, often memoization-for-correctness; (2) Test after each fix; (3) Remove "use no memo" once fixed; (4) Verify the component shows the ✨ badge in React DevTools.

How to report React Compiler bugs

Before filing a bug report: (1) Verify it's not a Rules of React violation by checking with ESLint; (2) Create a minimal reproduction by isolating the issue in a small example; (3) Test without the compiler to confirm the issue only occurs with compilation. When filing an issue, include React and compiler versions, minimal reproduction code, expected vs actual behavior, and any error messages.

Give your agent this brain