Error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

해결

이 warning은 component가 unmount 되었는데, setState를 실행할 경우 발생한다. 실행되는 데에는 문제가 없지만, 배포 전에는 고쳐줘야 한다.
warning은 최초 실행 시에만 메시지가 출력되므로 새로고침해서 테스트 해봐야 한다.

isAlive라는 state를 사용해서, setState를 실행할 때에는 true인지 확인하고, true(=mount) 상태일 때만 setState를 실행하도록 변경했다.

before

const setRawData = async () => {
  setLoading(true)
  const data = await getRawData(deviceName, 50)
  setRawDataList(data)
  setLoading(false)
}

useEffect(() => {
  setRawData()
}, [])

after

const [isAlive, setIsAlive] = useState(true)

useEffect(() => {
    const setRawData = async () => {
        if (isAlive) {
            setLoading(true)
        }
        const data = await getRawData(deviceName, 50)

        if (isAlive) {
            setRawDataList(data)
            setLoading(false)
        }
    }

    setRawData()

    return () => {
        setIsAlive(false)
    }
}, [])

참조

https://yceffort.kr/2021/02/memory-leak-and-useeffect
https://goddino.tistory.com/292
https://stackoverflow.com/questions/62336340/cannot-update-a-component-while-rendering-a-different-component-warning