Description
In frontend/src/components/App/Settings/NumRowsInput.tsx, there are redundant useMemo hooks used solely to calculate the initial values of selectedValue and customValue state variables.
These useMemo hooks use variables like options but pass an empty dependency array [] (forcing calculation only on mount). This violates the ESLint rule for hooks, requiring the use of // eslint-disable-next-line react-hooks/exhaustive-deps hacks.
Proposed Improvement
Using useMemo to initialize state is a React anti-pattern. Instead, we can use React's standard Lazy State Initializer pattern. By passing a initialization function directly inside useState(() => { ... }), we can:
- Ensure the computation runs exactly once on mount.
- Completely remove the redundant
useMemo hooks.
- Clean up the codebase by removing the
eslint-disable workarounds.
Expected Behavior
The settings UI works exactly as before, but with cleaner code, better performance, and standard-compliant React hooks usage.
Description
In
frontend/src/components/App/Settings/NumRowsInput.tsx, there are redundantuseMemohooks used solely to calculate the initial values ofselectedValueandcustomValuestate variables.These
useMemohooks use variables likeoptionsbut pass an empty dependency array[](forcing calculation only on mount). This violates the ESLint rule for hooks, requiring the use of// eslint-disable-next-line react-hooks/exhaustive-depshacks.Proposed Improvement
Using
useMemoto initialize state is a React anti-pattern. Instead, we can use React's standard Lazy State Initializer pattern. By passing a initialization function directly insideuseState(() => { ... }), we can:useMemohooks.eslint-disableworkarounds.Expected Behavior
The settings UI works exactly as before, but with cleaner code, better performance, and standard-compliant React hooks usage.