{"id":361479,"date":"2021-11-02T15:16:27","date_gmt":"2021-11-02T12:16:27","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it\/"},"modified":"2021-11-02T15:16:27","modified_gmt":"2021-11-02T12:16:27","slug":"fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it\/","title":{"rendered":"#Fixing React\u2019s \u201cCalled SetState() on an Unmounted Component\u201d Errors \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a249193c2817\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a249193c2817\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it\/#A_Simple_Component\" >A Simple Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it\/#Solving_the_Problem\" >Solving the Problem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it\/#Other_Possible_Causes\" >Other Possible Causes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it\/#Overriding_the_setState_Function\" >Overriding the setState() Function<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/fixing-reacts-called-setstate-on-an-unmounted-component-errors-cloudsavvy-it\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#Fixing React\u2019s \u201cCalled SetState() on an Unmounted Component\u201d Errors \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-8770\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"React logo on a dark background\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Seeing <code>Called setState() on an Unmounted Component<\/code> in your console is one of the most frequent issues faced by newcomers to React. When you\u2019re working with class components, you can easily create situations where you encounter this error.<\/p>\n<p>Updating the state of components that have been removed from the DOM usually signals your <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lication has a memory leak. This wastes your user\u2019s hardware resources and will cause a gradual performance reduction if left unchecked. Here\u2019s why the error occurs and what you can do to resolve it.<\/p>\n<h2 id=\"a-simple-component\"><span class=\"ez-toc-section\" id=\"A_Simple_Component\"><\/span>A Simple Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here\u2019s a basic React component that fetches some data over the network:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> React from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">class<\/span> <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">News<\/a>List <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n        news<span class=\"sy0\">:<\/span> <span class=\"kw2\">null<\/span>\n\u00a0\n    <span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        fetch<span class=\"br0\">(<\/span><span class=\"st0\">\"http:\/\/example.com\/news.json\"<\/span><span class=\"br0\">)<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span>res <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n            <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>news<span class=\"sy0\">:<\/span> response.<span class=\"me1\">json<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span>.<span class=\"kw1\">catch<\/span><span class=\"br0\">(<\/span>e <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n            alert<span class=\"br0\">(<\/span><span class=\"st0\">\"Error!\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span><span class=\"sy0\">!<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">news<\/span><span class=\"br0\">)<\/span> <span class=\"kw1\">return<\/span> <span class=\"st0\">\"Loading...\"<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"kw1\">else<\/span> <span class=\"kw1\">return<\/span> news.<span class=\"me1\">map<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>story<span class=\"sy0\">,<\/span> key<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"sy0\">&lt;<\/span>h1 key<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>key<span class=\"br0\">}<\/span><span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>story.<span class=\"me1\">Headline<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This component poses a risk of generating <code>called setState() on an unmounted component<\/code> errors. To understand why, consider what happens when you visit a page that renders the <code>NewsList<\/code>. The component will make an asynchronous network request, then add the fetched news list to its state.<\/p>\n<p>The issue occurs when the network request takes a while to resolve. If there\u2019s a lot of news and the user\u2019s on a flaky 3G connection, it could conceivably take several seconds. In the meantime, the user may have given up and tapped to another page. This will unmount <code>NewsList<\/code> and remove it from the DOM.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-14627\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/10\/12d52ce5.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1495\" height=\"212\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Despite the navigation, the network request\u2019s still in-progress. Eventually it will resolve and its <code>.then()<\/code> callback will run. Per the error message, <code>setState()<\/code> is called on the unmounted <code>NewsList<\/code> instance.<\/p>\n<p>Now you\u2019re wasting memory by storing the news list in the unmounted component\u2019s state. The data will never be seen by the user \u2013 if they do return to the news list page, a <em>new<\/em> <code>NewsList<\/code> component will mount and fetch its own data.<\/p>\n<h2 id=\"solving-the-problem\"><span class=\"ez-toc-section\" id=\"Solving_the_Problem\"><\/span>Solving the Problem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The problem with this example is easily solved. Here\u2019s a really basic approach:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> NewsList <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    mounted<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n        news<span class=\"sy0\">:<\/span> <span class=\"kw2\">null<\/span>\n\u00a0\n    <span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">mounted<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n        fetch<span class=\"br0\">(<\/span><span class=\"st0\">\"http:\/\/example.com\/news.json\"<\/span><span class=\"br0\">)<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span>res <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n            <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">mounted<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n                <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>news<span class=\"sy0\">:<\/span> response.<span class=\"me1\">json<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"br0\">}<\/span>\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span>.<span class=\"kw1\">catch<\/span><span class=\"br0\">(<\/span>e <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n            alert<span class=\"br0\">(<\/span><span class=\"st0\">\"Error!\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"br0\">}<\/span>\n\u00a0\n\u00a0\n    componentWillUnmount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">mounted<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Now the results of the API call are ignored unless the component\u2019s still mounted. When the component\u2019s about to unmount, React calls <code>componentWillUnmounted()<\/code>. The component\u2019s <code>mounted<\/code> instance variable gets set to <code>false<\/code>, allowing the <code>fetch<\/code> callback to know whether it\u2019s connected to the DOM.<\/p>\n<p>This works but adds boilerplate code to keep track of the <code>mounted<\/code> state. The network call will run to completion too, potentially wasting bandwidth. Here\u2019s a better alternative that uses <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbortController\">an <code>AbortController<\/code><\/a> to cancel the <code>fetch<\/code> call midway through:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> NewsList <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    abortController <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> AbortController<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n        news<span class=\"sy0\">:<\/span> <span class=\"kw2\">null<\/span>\n\u00a0\n    <span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        fetch<span class=\"br0\">(<\/span><span class=\"st0\">\"http:\/\/example.com\/news.json\"<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">{<\/span>signal<span class=\"sy0\">:<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">abortController<\/span>.<span class=\"me1\">signal<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span>res <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n            <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>news<span class=\"sy0\">:<\/span> response.<span class=\"me1\">json<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span>.<span class=\"kw1\">catch<\/span><span class=\"br0\">(<\/span>e <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n            <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span>e.<span class=\"me1\">name<\/span> <span class=\"sy0\">===<\/span> <span class=\"st0\">\"AbortError\"<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n                <span class=\"co1\">\/\/ Aborted as unmounting<\/span>\n            <span class=\"br0\">}<\/span>\n            <span class=\"kw1\">else<\/span> alert<span class=\"br0\">(<\/span><span class=\"st0\">\"Error!\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n\u00a0\n    componentWillUnmount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">abortController<\/span>.<span class=\"me1\">abort<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Now the <code>fetch<\/code> call receives an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbortSignal\"><code>AbortSignal<\/code><\/a> that can be used to cancel the request. When React\u2019s going to unmount the component, the abort controller\u2019s <code>abort()<\/code> method is called. This will be reflected in the signal passed to <code>fetch<\/code> and the browser will handle cancellation of the network request. The <code>.then()<\/code> callback won\u2019t run so your component won\u2019t try to update its state after it unmounts.<\/p>\n<h2 id=\"other-possible-causes\"><span class=\"ez-toc-section\" id=\"Other_Possible_Causes\"><\/span>Other Possible Causes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Another common cause of this error is when you add event listeners or timers to your component but don\u2019t clear them when it\u2019s about to unmount:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> OfflineWarning <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>online<span class=\"sy0\">:<\/span> navigator.<span class=\"me1\">onLine<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    handleOnline <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>online<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    handleOffline <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>online<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"online\"<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">handleOnline<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"offline\"<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">handleOffline<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span><span class=\"sy0\">!<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">online<\/span> <span class=\"sy0\">?<\/span> <span class=\"st0\">\"You're offline!\"<\/span> <span class=\"sy0\">:<\/span> <span class=\"kw2\">null<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>If the user moves to a screen that doesn\u2019t render <code>OfflineWarning<\/code>, you\u2019ll get a <code>called setState()<\/code> error when their network conditions change. Although the component\u2019s no longer mounted, the browser event listeners it configured will still be active.<\/p>\n<p>The user might move back and forth between the screen with <code>OfflineWarning<\/code> and one without it several times. This would lead to there being multiple invisible component instances, all redundantly listening for network events.<\/p>\n<p>You can solve this by simply reversing operations when your component\u2019s unmounting:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> OfflineWarning <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"online\"<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">handleOnline<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"offline\"<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">handleOffline<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    componentWillUnmount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        window.<span class=\"me1\">removeEventListener<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"online\"<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">handleOnline<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        window.<span class=\"me1\">removeEventListener<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"offline\"<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">handleOffline<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Use the same model when working with timers and intervals. If you <code>setTimeout()<\/code> or <code>setInterval()<\/code> anywhere in your component, you should <code>clearTimeout()<\/code> and <code>clearInterval()<\/code> before it unmounts.<\/p>\n<h2 id=\"overriding-the-setstate-function\"><span class=\"ez-toc-section\" id=\"Overriding_the_setState_Function\"><\/span>Overriding the setState() Function<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Another option is to create your own base component that overrides <code>setState()<\/code>:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> SafeComponent <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">PureComponent<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    mounted <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    componentDidMount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">mounted<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    componentWillUnmount<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">mounted<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    setState<span class=\"br0\">(<\/span>state<span class=\"sy0\">,<\/span> callback<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">mounted<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n            <span class=\"kw5\">super<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span>state<span class=\"sy0\">,<\/span> callback<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Any components which call <code>setState()<\/code> in an asynchronous callback could then extend from <code>SafeComponent<\/code> instead of <code>React.PureComponent<\/code>. The <code>SafeComponent<\/code> parent keeps track of whether your component\u2019s mounted. Calls to <code>setState()<\/code> will be ignored if they\u2019re received while unmounted.<\/p>\n<p>This approach isn\u2019t really addressing the root of your problems. It\u2019s effective at suppressing the console error and avoiding unmounted state updates but it shouldn\u2019t be used in lieu of properly clearing timers and event listeners.<\/p>\n<p>Nonetheless this option can be helpful as a stop-gap when you\u2019re new to a codebase with a lot of issues. It may also be an acceptable resolution for errors derived from minor network requests which you don\u2019t feel a need to properly abort. If you\u2019re satisfying with receiving and discarding data after a user browses away from a screen, using a custom base component lets you avoid adding repetitive \u201cis mounted\u201d logic to each of your components.<\/p>\n<p>If you do choose this route, remember to call <code>super.componentDidMount()<\/code> and <code>super.componentWillUnmount()<\/code> in your child components when you override those methods. Otherwise the <code>mounted<\/code> property won\u2019t be set correctly. Forgetting to call <code>super.componentDidMount()<\/code> will mean <code>mounted<\/code> is always <code>false<\/code>, causing every state update to be ignored!<\/p>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Seeing <code>called setState() on an unmounted component<\/code> in your browser console means the callback for an async operation is still running after a component\u2019s removed from the DOM. This points to a memory leak caused by doing redundant work which the user will never benefit from.<\/p>\n<p>You can resolve these issues by implementing <code>componentWillUnmounted()<\/code> and properly cleaning up after your component. Abort incomplete network requests, remove event listeners, and cancel any timers you\u2019ve created. This will ensure there\u2019s no code left to run in the future so your component won\u2019t need to stick around and try to update its state after it\u2019s gone from the DOM.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/14611\/fixing-reacts-called-setstate-on-an-unmounted-component-errors\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#Fixing React\u2019s \u201cCalled SetState() on an Unmounted Component\u201d Errors \u2013 CloudSavvy IT&#8221; Seeing Called setState() on an Unmounted Component in your console is one of the most frequent issues faced by newcomers to React. When you\u2019re working with class components, you can easily create situations where you encounter this error. Updating the state of components&#8230;<\/p>\n","protected":false},"author":1,"featured_media":361480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-361479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/361479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=361479"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/361479\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/361480"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=361479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=361479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=361479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}