function useAsync(callback, deps = [], skip = false) {
const [state, dispatch] = useReducer(reducer, {
loading: false,
data: null,
error: false,
});
const fetchData = useCallback(async () => {
dispatch({ type: 'LOADING' });
try {
const data = await callback();
dispatch({ type: 'SUCCESS', data });
} catch (e) {
dispatch({ type: 'ERROR', error: e });
}
}, [callback]);
useEffect(() => {
if (skip) {
return;
}
fetchData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
return [state, fetchData];
}
위와 같은 reducer를 사용한 코디에서 error 값이 false가 아닌 null로 설정 되어 있으면
다른 코드들은 정상 작동을 하지만 skip=true 라는 버튼을 만들어준 코드는 동작하지 않게 된다.
error 값이 null인 경우는 논리연산자의 경우에서는 false로 동작한다고 알 고 있는데 이 함수에서는 논리연산자로 작동하지 않는다고 보면 될 것 같다.
좀 더 주의 깊게 사용할 필요가 있다고 판단이 된다.
초기값 설정을 바르게 해줄 필요 있음