Skip to content

React:useCallback

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)

원인: 56번째 줄의 localStorage.getItem(theme)에서 상태 변수 theme을 사용하고 있습니다.

React Compiler는 이 함수의 실제 의존성이 theme이라고 추론하지만, 수동 의존성 배열에는 [user, applyTheme]만 있어서 불일치가 발생합니다.

의도: localStorage.getItem(theme) → 여기서 theme은 상태값('system' 등)이 아니라 'theme'이라는 키 문자열을 넘기려 한 것으로 보입니다.

해결: 문자열 리터럴 'theme'을 직접 사용하면 됩니다. 

const localStorageTheme = localStorage.getItem('theme');

theme 변수(상태)는 이 함수의 의도와 무관하게 참조된 것이므로, 이렇게 수정하면 Compiler가 추론하는 의존성과 수동 의존성이 일치하게 되어 경고가 사라집니다.

See also