[New Rule] prefer-use-state-lazy-initialization

[patorjk]

Adds a new rule to detect function calls inside useState and recommends that an initializer function be used instead. For example, this code:

const [value, setValue] = useState(generateTodos());

Would trigger the rule into recommending this instead:

const [value, setValue] = useState(() => generateTodos());

More info: React docs on avoiding recreating initial state

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.51%. Comparing base (13f5c19) to head (70ce1a2).
⚠️ Report is 259 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3579      +/-   ##
==========================================
- Coverage   97.62%   97.51%   -0.12%     
==========================================
  Files         132      133       +1     
  Lines        9295     9320      +25     
  Branches     3400     3414      +14     
==========================================
+ Hits         9074     9088      +14     
- Misses        221      232      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ljharb]

I think that rules that are specific to hooks belong in eslint-plugin-react-hooks, not here.

[patorjk]

I think that rules that are specific to hooks belong in eslint-plugin-react-hooks, not here.

The description for that repo says its for enforcing the Rules of Hooks. There are 2 rules of hooks, and thus only 2 eslint rules in that repo. This rule is for finding wasteful function calls. It's oriented around the useState hook, but hooks are now a core part of React. I think not including rules related to them would leave out a huge part of React.

[ljharb]

Then it should be named "eslint-plugin-react-rules-of-hooks` or something :-) The readme there says it enforces the rules - it doesn't say they're only for that. I think it's worth trying to PR it into there before trying here.

[patorjk]

Then it should be named "eslint-plugin-react-rules-of-hooks` or something :-) The readme there says it enforces the rules - it doesn't say they're only for that. I think it's worth trying to PR it into there before trying here.

The more I think about it, it does kind of make sense, especially since this is something their docs talk about. I created a PR over there to see what they say.