How do I use eslint-plugin-react-compiler with eslint 9?
What eslint rules you recommend?
React Compiler and exhaustive-deps
eslint-plugin-react-no-manual-memo: ESLint plugin for React Compiler users to flag any usage of useMemo, useCallback, and React.memo
Videos
» npm install eslint-plugin-react-hooks
» npm install eslint-plugin-react-compiler
» npm install eslint-plugin-react
Hey all, I am in the process of creating my own eslint version 9 set of rules with a flat config for the first time and I am wondering what you guys are using or recommending as a must have?
I use Typescript with React so thought to definitely include eslint-plugin-react and typescript-eslint. What else? I saw there is sonar eslint too but this one seems not so popular?
Do you have any "gems" that are not enabled by default or not popular but still a great addition?
I also see that many rules can be customized a bit, do you recommend that or rather not?
Really curious and interested about your experience on this, thanks!
Hey, guys! I’ve been testing the React Compiler Eslint plugin to see if my codebase could benefit from any changes ahead of React 19 stable. One problem that I’ve run into is that disabling exhaustive-deps inline throws an eslint error because I’m disabling a react eslint rule, implying that the component will be skipped for compiler optimization. However, if I disable the rule globally in my eslintrc, no error is thrown. This might just be a limitation of the linter.
My question is, if I disable this rule globally, will react compiler still refuse to optimize the components that don’t follow the rules of exhaustive-deps? Exhaustive-deps is a rule that I don’t think has historically been the best option, because there are cases when you want to only run a useEffect on mount, and not if the states inside them change. Or, sometimes you only want useEffect to run when some states change, but not when others change.
It could also be the case that I just don’t understand how to write good useEffects after 5 years of using them, so I’m open to feedback about other ways of achieving the goals outlined above in an elegant way.
As someone who learned React in 2022, I write memoization hooks basically by instinct at this point, and I needed something to tell me to stop doing that now that React Compiler is here and tells us to not do that any more.
So, I wrote a little ESLint plugin to catch when I write useMemo, useCallback, or React.memo, and I figured I'd share it with everyone else too. Enjoy!
p.s. I made sure to include React Compiler Playground links in the docs so you can see React Compiler's memoization in action—not just blindly trust that the rules are right!
When I tried the config snippet in the question by @Jonathan Kasser, I got an error: TypeError: context.getSource is not a function.
The solution is to use fixupPluginRules from @eslint/compat (you need to install this), so my eslint.config.js has a separate object in the config array:
import { fixupPluginRules } from "@eslint/compat";
// Even though eslint-plugin-react-hooks exposes configs.recommended, it is not yet compatible with the flat file config,
// because it has plugins: [ 'react-hooks' ] property, but plugins should be an object
// Once it is supported, replace with: eslintPluginReactHooks.configs.recommended,
{
plugins: {
"react": reactPlugin, // remove this if you already have another config object that adds the react plugin
"react-hooks": fixupPluginRules(eslintPluginReactHooks),
},
rules: {
...eslintPluginReactHooks.configs.recommended.rules,
},
},
Resources
- https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2210934687
Proof it works
I've confirmed this by having a code that should error, and saw the error:
const [first, setfirst] = useState("");
useEffect(() => {
console.log(first);
}, []);
8:6 warning React Hook useEffect has a missing dependency: 'first'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[email protected] was released a few weeks ago with "stable" eslint v9 support. If you can upgrade, then see https://github.com/facebook/react/issues/28313#issuecomment-2408157792 for a sample configuration for now.
Also, follow this thread if interested in documentation refresh