[Error] Cannot update a component while rendering a different component

문제 상황

React에서 Recoil을 사용해 전역으로 컴포넌트의 토글 기능을 구현하는 중 다음 에러가 발생했습니다.

Warning: Cannot update a component (`ClockTool`) while rendering a different component (`MapToolbox`).

 

구글링 해본 결과 상태 업데이트가 동기적으로 수행되어 다른 컴포넌트 렌더링 중에 상태가 변경되었을 때 발생한다고 합니다. 이는 React의 렌더링 순서와 비동기 처리를 적절히 이해하고 관리해야 해결할 수 있는 문제였습니다.

 

해결 방법

해결 방법은 컴포넌트 랜더링을 끝낸 후에 다른 컴포넌트를 업데이트하는 것입니다.

대표적으로 useEffect를 사용한 해결 방법과 setTimeout을 활용한 해결방법이 있습니다.

 

저는 React 초보인 관계로 setTimeout을 사용해 상태 업데이트를 비동기로 처리하여 다른 컴포넌트의 렌더링과 겹치지 않도록 변경했습니다.

 

이전 코드

const [options, setOptions] = useRecoilState(OptionsState);

function on = () => {
     setOptions((prevOptions) => ({
            ...prevOptions,
            isOpenObjectTool: true,
            pickedObject: { 
                    id: pickedFeature._id, 
                    name: pickedFeature._name, 
                    position: clampedPosition 
                },
        }));
}

function off =() => {
     setOptions((prevOptions) => ({
        ...prevOptions,
        isOpenObjectTool: false,
        pickedObject: {
            ...prevOptions.pickedObject,
            id: '', 
            name: '',
            position: undefined
        }
    }));
}

 

 

해결 코드

const [options, setOptions] = useRecoilState(OptionsState);

function on = () => {
     setOptions((prevOptions) => ({
            ...prevOptions,
            isOpenObjectTool: true,
            pickedObject: { 
                    id: pickedFeature._id, 
                    name: pickedFeature._name, 
                    position: clampedPosition 
                },
        }));
}

function off =() => {
    setTimeout(() => {	// 변경 코드
        setOptions((prevOptions) => ({
            ...prevOptions,
            isOpenObjectTool: false,
            pickedObject: {
                ...prevOptions.pickedObject,
                id: '', 
                name: '',
                position: undefined
            }
        }));
    }, 0);	// 변경 코드
}

 

 

주요 변경 사항

1. setOptions 함수를 호출할 때 setTimeout을 사용하여 비동기로 상태를 업데이트하도록 수정했습니다. 이를 통해 상태 업데이트가 다른 컴포넌트의 렌더링과 겹치지 않도록 했습니다.

2. 비동기 처리를 통해 React의 상태 관리와 렌더링 순서를 조정함으로써 경고 메시지를 해결했습니다.

출처: https://pottatt0.tistory.com/entry/%F0%9F%94%A7-recoil-recoil%EB%A1%9C-react-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%ED%95%98%EA%B8%B0