Requirements when using annotation mode
When using `compilationMode: 'annotation'`, you must add `"use memo"` to every component you want optimized, add `"use memo"` to every custom hook, and remember to add it to new components as they are created.
installation/setup
96 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
Why incremental adoption is recommended
React Compiler can be adopted incrementally to test it on small parts of an app before expanding to the rest. Incremental adoption provides control over the rollout process, allows verification that the app behaves correctly with compiled code, enables measurement of performance improvements, and helps identify edge cases specific to the codebase. This approach is especially valuable for production applications where stability is critical.
Incremental adoption benefits for Rules of React violations
Instead of fixing Rules of React violations across an entire codebase at once, incremental adoption allows tackling violations systematically as compiler coverage expands. This keeps the migration manageable and reduces the risk of introducing bugs.
React Compiler incremental adoption approaches
There are three main approaches to adopt React Compiler incrementally: Babel overrides to apply the compiler to specific directories, opt-in with "use memo" to only compile components that explicitly opt in, and runtime gating to control compilation with feature flags. All approaches allow testing the compiler on specific parts of an application before full rollout.
Babel overrides for directory-based adoption
Babel's overrides option lets you apply different plugins to different parts of your codebase. Use the test property to specify directory patterns and the plugins property to apply babel-plugin-react-compiler to those directories.
Basic Babel overrides configuration example
Example Babel configuration using overrides to apply React Compiler to a specific directory: ```js module.exports = { plugins: [ // Global plugins that apply to all files ], overrides: [ { test: './src/modern/**/*.{js,jsx,ts,tsx}', plugins: [ 'babel-plugin-react-compiler' ] } ] }; ```
Expanding Babel overrides coverage
As confidence in the compiler grows, add more directories to the test array in overrides, or add multiple override entries for different directories. You can also apply different plugins to different directory sets. Example with multiple directories in one override: ```js module.exports = { plugins: [], overrides: [ { test: ['./src/modern/**/*.{js,jsx,ts,tsx}', './src/features/**/*.{js,jsx,ts,tsx}'], plugins: [ 'babel-plugin-react-compiler' ] }, { test: './src/legacy/**/*.{js,jsx,ts,tsx}', plugins: [ // Different plugins for legacy code ] } ] }; ```
Babel overrides with compiler options
You can configure compiler options per override by passing an options object as the second element in the plugins array. Example: ```js module.exports = { plugins: [], overrides: [ { test: './src/experimental/**/*.{js,jsx,ts,tsx}', plugins: [ ['babel-plugin-react-compiler', { // options ... }] ] }, { test: './src/production/**/*.{js,jsx,ts,tsx}', plugins: [ ['babel-plugin-react-compiler', { // options ... }] ] } ] }; ```
Opt-in compilation with "use memo" directive
Use `compilationMode: 'annotation'` in the React Compiler Babel plugin configuration to only compile components and hooks that explicitly opt in with the `"use memo"` directive. This approach gives fine-grained control over individual components and hooks, allowing testing of the compiler on specific components without affecting entire directories.
Annotation mode configuration
Set compilationMode to 'annotation' in babel.config.js: ```js module.exports = { plugins: [ ['babel-plugin-react-compiler', { compilationMode: 'annotation', }], ], }; ```
Using "use memo" directive for opt-in compilation
Add the `"use memo"` directive at the beginning of functions to opt them into compilation. This works for both components and custom hooks. Example: ```js function TodoList({ todos }) { "use memo"; // Opt this component into compilation const sortedTodos = todos.slice().sort(); return ( <ul> {sortedTodos.map(todo => ( <TodoItem key={todo.id} todo={todo} /> ))} </ul> ); } function useSortedData(data) { "use memo"; // Opt this hook into compilation return data.slice().sort(); } ```
Runtime feature flags with gating
The `gating` option enables control of compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments. The compiler wraps optimized code in a runtime check; if the gate returns true, the optimized version runs, otherwise the original code runs.
Gating configuration for React Compiler
Configure gating in babel.config.js with source and importSpecifierName properties: ```js module.exports = { plugins: [ ['babel-plugin-react-compiler', { gating: { source: 'ReactCompilerFeatureFlags', importSpecifierName: 'isCompilerEnabled', }, }], ], }; ``` The source is the module that exports the gating function, and importSpecifierName is the name of the function to import and call at runtime.
Implementing a feature flag gating function
Create a module that exports your gating function. The function should return true to enable the optimized version or false to use the original code. Example: ```js // ReactCompilerFeatureFlags.js export function isCompilerEnabled() { // Use your feature flag system return getFeatureFlag('react-compiler-enabled'); } ```
Troubleshooting React Compiler adoption
If you encounter issues during adoption, use `"use no memo"` to temporarily exclude problematic components, check the debugging guide for common issues, fix Rules of React violations identified by the ESLint plugin, and consider using `compilationMode: 'annotation'` for more gradual adoption.
Install React Developer Tools for Firefox
React Developer Tools can be installed as a browser extension for Firefox from https://addons.mozilla.org/en-US/firefox/addon/react-devtools/. Once installed on a website built with React, it provides Components and Profiler panels for debugging.
React Native debugging with React Native DevTools
For React Native apps, use React Native DevTools, the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection. For React Native versions earlier than 0.76, use the standalone build of React DevTools instead.
Connect standalone React Developer Tools to a website
To use the standalone React Developer Tools with Safari or other browsers, add a script tag to the beginning of your website's <head> element: <script src="http://localhost:8097"></script>. Then reload the website in the browser to view it in developer tools.
Install React Developer Tools for Safari and other browsers via npm
For Safari and other browsers not covered by the extension, install the react-devtools npm package globally using either 'yarn global add react-devtools' or 'npm install -g react-devtools'. Then run 'react-devtools' from the terminal to open the developer tools.
Install React Developer Tools for Edge
React Developer Tools can be installed as a browser extension for Microsoft Edge from https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil. Once installed on a website built with React, it provides Components and Profiler panels for debugging.
Install React Developer Tools for Chrome
React Developer Tools can be installed as a browser extension for Chrome from https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en. Once installed on a website built with React, it provides Components and Profiler panels for debugging.
React Compiler supports multiple build tools
React Compiler can be installed across several build tools including Babel, Vite, Metro, and Rsbuild. The compiler is primarily a light Babel plugin wrapper around the core compiler. Next.js users can enable the swc-invoked React Compiler by using v15.3.1 and up.
React Compiler is stable and production-tested
React Compiler is now stable and has been tested extensively in production at companies like Meta. Rolling out the compiler to production depends on the health of your codebase and how well you've followed the Rules of React.
React Compiler for optimization
React Compiler is a tool that automatically optimizes React apps. It performs automatic optimization without requiring manual configuration.
Setup section topics overview
React setup involves integrating with tools like editors, TypeScript, browser extensions, and compilers. The setup documentation covers editor setup, TypeScript integration, React Developer Tools browser extension, and React Compiler.
Editor setup for React
React has recommended editors with specific setup instructions. See the editor-setup documentation to learn how to configure editors to work with React.
TypeScript integration with React
TypeScript is a popular way to add type definitions to JavaScript codebases and can be integrated into React projects. Documentation is available on how to integrate TypeScript into React projects.
React Developer Tools browser extension
React Developer Tools is a browser extension that allows you to inspect React components, edit props and state, and identify performance problems. Installation instructions are available in the documentation.
TypeScript setup for React requires @types/react and @types/react-dom
To add TypeScript support to a React project, install @types/react and @types/react-dom packages. These packages provide type definitions for React. Install with: npm install --save-dev @types/react @types/react-dom
TypeScript tsconfig.json requirements for React
Two compiler options must be configured in tsconfig.json for React development: (1) 'dom' must be included in the 'lib' option (dom is included by default if no lib option is specified), and (2) 'jsx' must be set to one of the valid options, with 'preserve' being sufficient for most applications.
TypeScript production-grade React frameworks support TypeScript
All production-grade React frameworks offer support for using TypeScript. These include Next.js, Remix, Gatsby, and Expo, each with their own framework-specific setup guides.
JSX files must use .tsx extension in TypeScript
Every file containing JSX must use the .tsx file extension. This is a TypeScript-specific extension that tells TypeScript the file contains JSX.
App.js exports the main component to display
The App.js file contains the main React component exported with export default. This is typically the top-level component that renders everything else. In index.js, App is imported and used as the component to render.
index.js bridges components to the browser
The index.js file imports React, ReactDOM, component files, and CSS. It brings all pieces together and renders the app into index.html in the public folder. While not edited in the tutorial, it is essential for connecting React components to the actual browser display.
Setup for tutorial using CodeSandbox
To set up the tic-tac-toe tutorial online, click Fork in the top-right corner of the code editor to open it in CodeSandbox. This allows you to edit code in your browser and see previews. CodeSandbox has three main sections: Files panel, code editor, and browser preview.
Local development setup requires Node.js and npm
To run React locally: 1) Install Node.js from nodejs.org, 2) Download the sandbox from CodeSandbox using the menu, 3) Unzip the archive, 4) Open terminal and cd to the directory, 5) Run 'npm install' to install dependencies, 6) Run 'npm start' to start a local server.