[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

Merging #3579 (70ce1a2) into master (13f5c19) will decrease coverage by 0.12%.
The diff coverage is 100.00%.

@@            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     

Impacted Files	Coverage Δ
lib/rules/index.js	100.00% <ø> (ø)
lib/rules/prefer-use-state-lazy-initialization.js	100.00% <100.00%> (ø)

... and 3 files with indirect coverage changes

[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.