Warning: Can't perform a React state update on an unmounted component.

[AnnieTaylorCHEN]

Description

I've encountered this warning after upgrading. Most warning says the <Nav > at layout.js has issues. This Nav is a component where the navigation links (both desktop and mobile) are and are inserted to layout.js like this:

 useEffect(() => {
    if (typeof window === "undefined" || !window.document) {
      console.log(`bailing out of the useeffect. Going to continue to render??`)
      return
    }
  }, [])

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      {typeof window!=='undefined'? <Nav />:null }
      <main>{children}</main>
      <Footer />
    </>

I have that because I used document in the

like this:

  document.addEventListener("scroll", () => {
    if (window.scrollY > 150) {
      setBgColor("hsla(0, 16%, 93%, 0.9)")
      setStickyLogo("inline-block")
    } else {
      setBgColor("transparent")
      setStickyLogo("none")
    }
  })

so when you scroll down the nav will be top sticky bar with background color... otherwise none.

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.
    in Nav (at layout.js:33)
    in Layout (at tag-template.js:16)
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default (created by PageRenderer)
__stack_frame_overlay_proxy_console__ @ index.js:2177
overrideMethod @ react_devtools_backend.js:2430
printWarning @ react-dom.development.js:89
error @ react-dom.development.js:61
warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:23162
scheduleUpdateOnFiber @ react-dom.development.js:21170
dispatchAction @ react-dom.development.js:15661
(anonymous) @ nav.js:32

Steps to reproduce

I've recently updated to gatsby 2.32.3 and found several issues... this warning is one example I haven't solved...Difficult to reproduce since I have no idea which part caused it.

Expected result

No console warning in red.

Actual result

See the warning above.

Environment

"dotenv": "^8.2.0",
    "gatsby": "^2.32.3",
    "gatsby-image": "^2.3.5",
    "gatsby-plugin-advanced-sitemap": "^1.6.0",
    "gatsby-plugin-algolia": "^0.5.0",
    "gatsby-plugin-google-analytics": "^2.2.5",
    "gatsby-plugin-html-attributes": "^1.0.5",
    "gatsby-plugin-manifest": "^2.3.7",
    "gatsby-plugin-offline": "^3.1.5",
    "gatsby-plugin-react-helmet": "^3.2.5",
    "gatsby-plugin-robots-txt": "^1.5.1",
    "gatsby-plugin-sharp": "^2.14.1",
    "gatsby-plugin-styled-components": "^3.2.4",
    "gatsby-remark-images": "^3.2.6",
    "gatsby-remark-source-name": "^1.0.0",
    "gatsby-source-filesystem": "^2.2.5",
    "gatsby-transformer-remark": "^2.7.5",
    "gatsby-transformer-sharp": "^2.4.7",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^5.2.1",

[herecydev]

Wherever you are adding that document.addEventListener you need to remove it when the component is unmounting to prevent it being called afterwards (which is why it's throwing that error). For example:

useEffect(() => {
document.addEventListener(() => { //things that setState })
return () => { document.removeEventListener() }
}, [])

That way React will ensure it is cleaned up correctly, it's also more idiomatic that side effect + clean up is contained together, rather than split across components.

[AnnieTaylorCHEN]

Jaha... thanks for the help! I gotta try this out today. 😸