useReducer dispatch 참조 안정성 오해

dispatch를 useEffect 의존성에서 제외했더니 ESLint 경고 없이 작동하지만, 복잡한 시나리오에서 state가 꼬입니다. 버그를 찾으세요:

JSX

function reducer(state, action) {
  switch (action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    case 'SET_ERROR':
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

function DataFetcher({ url }) {
  const [state, dispatch] = useReducer(reducer, { data: null, error: null });

  const fetchData = useCallback(async () => {
    try {
      const res = await fetch(url);
      const json = await res.json();
      dispatch({ type: 'SET_DATA', payload: json });
    } catch (err) {
      dispatch({ type: 'SET_ERROR', payload: err.message });
    }
  }, [url]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return state.error
    ? <p>에러: {state.error}</p>
    : <pre>{JSON.stringify(state.data)}</pre>;
}

답변

async 함수를 useCallback으로 감싸면 메모리 누수가 발생함 코드에 실제 버그가 없음 - dispatch는 참조가 안정적이고 useCallback 의존성도 올바름 useReducer와 useCallback을 함께 쓰면 무한 루프가 발생함 dispatch를 useCallback 안에서 사용하면 안 됨

로그인 후 제출하기