Coming from https://expensify.slack.com/archives/C08CZDJFJ77/p1754356010769039
Background: The React Compiler is meant to automatically optimize React code with invisible React.memo, useMemo, and useCallback calls. This in theory eliminates the need to use these React constructs in the codebase.
However, we see many examples where performance can be improved with useMemo. It's unclear when React Compiler will "do it's thing" and when it won't.
Furthermore, we have many many components and hooks throughout the codebase the violate the Rules of React.
The React Compiler has come a long way since this issue was first created, and it's now much more tightly integrated with lint rules in eslint-plugin-react-hooks which are designed precisely to help enforce the Rules of React and to teach developers how to write better React Code in the process.
Problem:
- (done) Update eslint-plugin-react-hooks and enable all rules globally. See what errors crop up. There were 559.
- (done) Make them all warnings in the global ESLint config, and set
--max-warnings accordingly so that npm run lint passes on main.
- Create issues to fix all the react-hooks lint rules, work through them in batches. At the end of this effort:
- All files should be compiled with React Compiler
- All files should be compliant with the Rules of React (insofar as the React Compiler can currently enforce that)
- (optional) Create issues to start removing all unnecessary manual memoization (to simplify/reduce the codebase, and potentially see performance gains)
Coming from https://expensify.slack.com/archives/C08CZDJFJ77/p1754356010769039
Background: The React Compiler is meant to automatically optimize React code with invisible
React.memo,useMemo, anduseCallbackcalls. This in theory eliminates the need to use these React constructs in the codebase.However, we see many examples where performance can be improved with
useMemo. It's unclear when React Compiler will "do it's thing" and when it won't.Furthermore, we have many many components and hooks throughout the codebase the violate the Rules of React.
The React Compiler has come a long way since this issue was first created, and it's now much more tightly integrated with lint rules in eslint-plugin-react-hooks which are designed precisely to help enforce the Rules of React and to teach developers how to write better React Code in the process.
Problem:
--max-warningsaccordingly so thatnpm run lintpasses on main.