no-use-state-initializer-functions rule

[rezkiy37]

This PR implements a new ESLint rule to detect and restricts usage initializer functions for useState in E/App. Basically, when a function is being called directly within the useState hook, which means it gets executed on every render, even though it only needs to run during the initial state setup.

const [state, setState] = useState(initStateFunc());

We can pass a callback to the useState hook instead. This ensures the function is only executed once during the initial render, improving performance:

const [state, setState] = useState(() => initStateFunc());

By making this change, e.g. BottomTabBar avoids unnecessary re-execution of getChatTabBrickRoad on every render. This optimization reduces the render time from approximately ±500ms to just 50-100ms, resulting in a more than 5x performance improvement (Expensify/App#53201). This ESLint rule detects these situations to avoid such perf. problems like Expensify/App#53162.

Issue: Expensify/App#53322, Expensify/App#53162

Tests

1. Checkout this branch.
2. Go to E/App repo and run this command to link your eslint-config-expensify repo to E/App: npx link publish <path-to-eslint-repo>/.
3. Make change in a file that has plenty of examples e.g. src/components/TimePicker/TimePicker.tsx, and commit that file.

+ const [hours, setHours] = useState(DateUtils.get12HourTimeObjectFromDate(value, showFullFormat).hour);
+ const [minutes, setMinutes] = useState(DateUtils.get12HourTimeObjectFromDate(value, showFullFormat).minute);
+ const [seconds, setSeconds] = useState(DateUtils.get12HourTimeObjectFromDate(value, showFullFormat).seconds);
+ const [milliseconds, setMilliseconds] = useState(DateUtils.get12HourTimeObjectFromDate(value, showFullFormat).milliseconds);
+ const [amPmValue, setAmPmValue] = useState(DateUtils.get12HourTimeObjectFromDate(value, showFullFormat).period);

4. Run npm run lint-changed, assert the errors were reported.

Screenshots

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[rezkiy37]

I have read the CLA Document and I hereby sign the CLA

[rezkiy37]

@mountiny, this PR is ready for review 🙂

[mountiny]

@alitoshmatov Can you please test this PR and review it? thanks!

[alitoshmatov]

@rezkiy37 I think we should also cover a case where useState(condition?a():b()). Based on my testing this is not handled

[rezkiy37]

@alitoshmatov, done - fa4c5fd.

[alitoshmatov]

LGTM!

Screenshots

[mountiny]

Thanks! lets get this in App now 🚀

[rezkiy37]

I've pushed commits forcefully to sign them.

cc @alitoshmatov @mountiny

[os-botify]

🚀 Published to npm in 2.0.74 🎉