react에서 에러 status에 따라 에러 모달을 가져오는 법

Question

안녕하세요. 지금 api를 호출 후에 api에서 에러가 났을 때, 해당 에러의 status를 저장하여 해당 status에 맞는 에러 모달을 띄워주려고 하고 있습니다.
```
catch (error: unknown) {
		if (error instanceof AxiosError) {
			handleErrorModal(error.response?.status);
		}
		return null;
	}
```
이렇게 fetchData에서 에러가 발생했을 때, handleErrorModal로 에러 status를 전달하고 있습니다.
```
const [errorType, setErrorType] = useRecoilState(errorDataState);
	const handleErrorModal = (errorStatus: string | number | null) => {
		setErrorType(errorStatus);
	};
```
그리고 handleErrorModal 함수는 이와 같이 작성을 해놓은 상태이고요. 근데, setState가 비동기로 작동해서인지 errorStatus가 저장이 되지 않아서 계속 초기값인 null을 띄워줍니다. 그리고, 계속 
```
Warning: Cant perform a React state update on a component that hasnt mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
```
이 오류를 띄우네요. 이 문제를 해결하기 위해서는 useEffect를 쓰는 방법외에는 다른 방법이 없는걸까요?

김하늘 · Answer

React 버전 18이상 이시라면 Suspense를 써보셔도 될 거 같습니다.
 
혹은 리코일에  useRecoilValueLoadable 이라는 훅이 있습니다. 이름에서 유추하실 수 있다시피 비동기 셀럭터의 값을 읽는 용도입니다.