admin管理员组文章数量:1323715
I have the below ponent , where i am displaying message for 5 sec and then removing it from home page.
when i switch between the pages, i'm getting below error sometimes. Any Advice please
index.js:1 Warning: Can't perform a React state update on an unmounted ponent.
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.
Code:
const Home = props => {
const [visible, setVisible] = useState(true);
useEffect(() => {
setTimeout(() => setVisible(false), 5000);
}, []);
return (
<div >
{visible && <Message showDefault={false} /> }
<BaseView />
</div>
);
};
I have the below ponent , where i am displaying message for 5 sec and then removing it from home page.
when i switch between the pages, i'm getting below error sometimes. Any Advice please
index.js:1 Warning: Can't perform a React state update on an unmounted ponent.
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.
Code:
const Home = props => {
const [visible, setVisible] = useState(true);
useEffect(() => {
setTimeout(() => setVisible(false), 5000);
}, []);
return (
<div >
{visible && <Message showDefault={false} /> }
<BaseView />
</div>
);
};
Share
Improve this question
asked Oct 10, 2020 at 13:19
upogupog
5,5268 gold badges55 silver badges85 bronze badges
2
-
Seems like
Message
ponent tries to update itself, but the ponent bees unmounted. Post the code of whatMessage
is doing? – Prateek Thapa Commented Oct 10, 2020 at 13:26 - yes, the message ponent is also used in other places. – upog Commented Oct 10, 2020 at 13:29
2 Answers
Reset to default 7Well, the error is actually quite self-explanatory: the state-changing function triggered by setTimeout
is invoked after the ponent has already been unmounted. But it's no-op in disguise: ponent is no longer rendered, why should anyone be interested in its internal state changes?
Thankfully, React provides a documented way to clean up those and similar async state-changers - by using a function returned by an useEffect
callback. Like this:
useEffect(() => {
const timeoutId = setTimeout(() => setVisible(false), 5000);
return function cleanup() {
clearTimeout(timeoutId);
}
}, []);
Note that the function doesn't have to be named (but it simplifies reading a bit).
You get that warning as the timer you have setup might have been called after the ponent has been unmounted from the DOM.
You need to clear the timer in the cleanup callback from the useEffect
hook:
const Home = props => {
const [visible, setVisible] = useState(true);
useEffect(() => {
const timerId = setTimeout(() => setVisible(false), 5000);
//Use the clean up callback which would be executed weh the ponent is unmounted
return () => clearTimeout(timerId);
}, []);
return (
<div >
{visible && <Message showDefault={false} /> }
<BaseView/>
</div>
);
};
From the React docs:
Why did we return a function from our effect? This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect!
When exactly does React clean up an effect? React performs the cleanup when the ponent unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.
本文标签: javascriptReact setTimeoutmemory leakStack Overflow
版权声明:本文标题:javascript - React setTimeout - memory leak - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742125072a2421901.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论