ESLint rule for detecting function calls inside useState (for recommending lazy initialization)

[patorjk]

Summary

Adds a new ESLint 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

How did you test this change?

I added a test file with various tests. The test file passes when I run "yarn test".

As an aside, initially I submitted this to eslint-plugin-react, but they felt this would be a better place for it.

Closes #26520

[legendkong]

+1 🤪

[SeanSilke]

Here you should get two errors. Because you have
two function calls.

[SeanSilke]

I think code will be clearer if you just ban all calls inside useState

Suggested change

	create(context) {
	create: (context) => {
	let useStateCallExpression = null;
	return {
	CallExpression(node) {
	if (node.callee.type === 'Identifier' && node.callee.name === 'useState') {
	useStateCallExpression = node;
	return;
	}
	if (useStateCallExpression) {
	context.report({ node, messageId: 'useLazyInitialization' });
	}
	},
	'CallExpression:exit': function (node) {
	if (node === useStateCallExpression) {
	useStateCallExpression = null;
	}
	},
	};
	},