React:useCallback
lastmod 2026-03-07created 2026-03-072 edits
Troubleshooting
Existing memoization could not be preserved
ESLint:
Compilation Skipped: Existing memoization could not be preserved
React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `theme`, but the source dependencies were [user, applyTheme]. Inferred different dependency than source.
/home/zer0/Project/app.cvp.run/src/react-app/hooks/useTheme.ts:50:39
48 | );
49 |
> 50 | const initializeTheme = useCallback(async () => {
| ^^^^^^^^^^^^^
> 51 | let targetTheme: Theme = system;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 52 |
…
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 63 | applyTheme(targetTheme);
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 64 | }, [user, applyTheme]);
| ^^^^ Could not preserve existing manual memoization
65 |
66 | useEffect(() => {
67 | if (!isLoading) {
(react-hooks/preserve-manual-memoization)
Cause: localStorage.getItem(theme) on line 56 uses the state variable theme.
React Compiler infers that the function's actual dependency is theme, but the manual dependency array only contains [user, applyTheme], so there is a mismatch.
Intent: in localStorage.getItem(theme), theme seems meant to pass the key string 'theme', not the state value ('system' etc.).
Fix: use the string literal 'theme' directly.
The theme variable (state) was referenced regardless of what the function intended, so with this change the dependencies inferred by the Compiler match the manual dependencies and the warning goes away.