React performance mistake: Calling a function multiple times with the same args


React performance mistake: Calling a function multiple times with the same args.

Solution: Call the function once above the JSX.
This is an easy mistake to make, so I prefer to put derived state near the top, typically under my useState calls.

Then it’s easier to notice when a function has already been invoked.

I’d love to see an ESLint rule for this issue.

View original on X