Successfully rolling out the compiler to your codebase

[poteto]

As background, in addition to automatic optimizations the compiler also does static validation of the Rules of React in order to correctly optimize components and hooks.

When the compiler detects a violation of these assumptions, it safely skips over the offending component or hook and continues compiling the rest of your code.

Because the compiler can safely skip these components, please note that it's absolutely not necessary to fix these violations straight away in order for you to see benefits from using the compiler. You can fix these as a second step after you first confirm that your app still works with the optimizations enabled.

We strongly recommend that you first get the compiler working on your app and testing that the app works at all. Once you get to this state, you can start profiling and running experiments to collect data on any changes to performance. After you have done this, you can go back and take a look at the components and hooks with reported errors from eslint-plugin-react-compiler and address them in order to improve memoization coverage.

Our recommended approach for using the compiler is thus:

1. Make it work
   • Try to compile as much of your app as possible, and verify that it's not broken
   • Measure if performance has improved
2. Make it right
   • Check which components or hooks break the Rules of React, using eslint-plugin-react-compiler
   • Fix them to make your code more resilient and to fix hidden bugs
3. Make it faster
   • You may be able to get this step "for free" if you have fixed Rules of React violations, since the compiler can now optimize them!