This project provides a minimal setup for a React 19 app powered by React Compiler. In this developer playground you can prototype and test how React Compiler will optimize re-renders in React applications.
npm install
npm run devIn ./src/App.jsx you can add components you want to test. You can use console.log to check which components re-render and when.
You can use React Devtools (v5.0+), which has built-in support for React Compiler and will display a “Memo ✨” badge next to components that have been optimized by the compiler.
In React Devtools, you can also enable “Highlight updates when components render” option for a visual indication when components rerender (However, I found that it does not always accurately work with components optimized by React Compiler, so using console.log to check if the component is re-rendered seems more reliable as of now).
Minification is disabled in this project, so when you don't understand why some components are being re-rendered when you think they shouldn't, you can build this project with npm run build and
examine the dist folder to see the output of the React Compiler (open ./dist/assets/index-*.js and scroll to the bottom).
You can also copy your code to React Compiler online playground and see the compilation result there.
Example of the project running and how it can be used to detect unexpected behavior of React Compiler:
Read more about it in this article about React Compiler common memoization “gotcha”.