๊ฐ๋ฐ/โ ์ค๋ฅ ๋
ธํธ
[React] 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.
๋ฐ(Ming) ๐โโฌ
2022. 2. 17. 22:06
728x90
๋ฐ์ํ
โ 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.
โ ์ธ๋ง์ดํธ ๋ ์ปดํฌ๋ํธ์์๋ ์ํ๋ฅผ ์ถ์ ํ ์ ์๊ณ , ์ํ๋ฅผ ์ถ์ ํ์ง ์๊ธฐ์ ์์
์ด ์ํ๋์ง๋ ์์ง๋ง,
๋ฉ๋ชจ๋ฆฌ ๋์๊ฐ ๋ฐ์ํ ์ ์์ผ๋, useEffect์ cleanup ํจ์๋ฅผ ์ด์ฉํด๋ผ
react๋ก ์์
์ ํ๋ค๋ณด๋ฉด ์ข
์ข
๋ง๋๋ ์๋ฌ ์ค ํ๋์
๋๋ค.
์ด ์๋ฌ๋ fetch ๋ฑ ๋น๋๊ธฐ๋ฅผ ์คํํ๋ ์คํ context๊ฐ ์๋ฃ ๋๊ธฐ ์ ์ ์ปดํฌ๋ํธ๊ฐ unmount๊ฐ ๋ ํ setState๊ฐ ์คํ์ด ๋ ๋ ๋ฐ์ํ๊ฒ ๋ฉ๋๋ค. ์ด๋ด ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ์?!
๐ mount, unmount๋ฅผ ํด์ฃผ๋ ๋ฐฉ๋ฒ์ ๋๋ค.
๋ณ์๋ก mount๋ฅผ false๋ก ์ ์ธํด์ฃผ๊ณ ๋น๋๊ธฐ ์ปจํ ์คํธ๋ฅผ ์คํํ๊ธฐ ์ ์ true๊ฐ์ผ๋ก ๋ณ๊ฒฝ ๋์ ๋ค์ false๋ก ๋ณ๊ฒฝํด์ฃผ๋ฉด ํด๊ฒฐ๋ฉ๋๋ค. ์ ๋ useState๋ก ๊ด๋ฆฌํด์คฌ์ต๋๋ค.
const [mount, setMount] = useState(false)
useEffect(() => { ...
try{
setMount(true)
}catch(err){
}
setMount(false)
//or Cleanupํจ์์์ผ๋ก ์ฒ๋ฆฌํด๋ ๋ฉ๋๋ค!
},[]}
728x90