When I add Nextjs Image component in react hook, will show error "Can't perform a React state update on an unmounted component."

Question

I make a UI that need change layout when window width change.

But when I add Image(Nextjs component) in my hook, I will get error message.

I don't know why add Image(Nextjs component) has this problem.

Devtool show error message.

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.
    at Image (webpack-internal:///./node_modules/next/dist/client/image.js:376:22)
    at a
    at div
    at div
    at LinkBar

Has problem hook

const LinkBar = () => {
  return (
    <>
      <div className="justify-center items-center flex flex-wrap gap-4">
        <a target="_blank" href="https://www.twitch.tv/xxxxxx" rel="noopener noreferrer">
          <div className="px-4 rounded-lg border-2 border-blue-200 bg-purple-400 ring-2 ring-purple-900 font-bold hover:text-white">
            Twitch
          </div>
        </a>
      </div><div className="mt-4 gap-4 md:flex md:justify-center md:items-center">
        <div className="text-center">
          <a target="_blank" href="xxxxxx" rel="noopener noreferrer">
            <Image src="/images/line_stamp.jpg" alt="logo" width={320} height={240} layout="intrinsic" />
          </a>
        </div>
        <div className="text-center">
          <SubscriptionStampViewer />
        </div>
        <div className="py-4"></div>
      </div>
    </>
  )
}

Main page with check width function.

const Home: NextPage = () => {
  const [mobileStyle, setMobileStyle] = useState(false);

  const handleResize = () => {
    if (window.innerWidth > 767) {
      setMobileStyle(true);
    } else if (window.innerWidth < 767) {
      setMobileStyle(false);
    }
  }

  useEffect(() => {
    handleResize();

    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, [])

  return (
    <Layout>
      <div className="w-full">
        <div className="justify-center items-end md:flex">
          <div className="px-4 pt-4 md:p-0 md:mb-16">
            <div>
              <Image src="/images/logo.png" alt="logo" width={750} height={264} layout="intrinsic" />
            </div>
            {mobileStyle ? <LinkBar /> : null}
          </div>
          <div className="text-center">
            <Image src="/images/avatar.png" alt="avatar" width={666} height={850} layout="intrinsic" />
          </div>
          {mobileStyle ? null : <LinkBar />}
        </div>
      </div>
    </Layout>
  )
}

SubscriptionStampViewer Code

const SubscriptionStampViewer = () => {
    const [toggle, setToogle] = useState(true);

    return (
        <div className="border-2 w-80 h-60">
            <div className="h-4/5 border-2 overflow-auto">
                <div>Follow</div>
                <div>Tier1</div>
                <div>Tier2</div>
                <div>Tier3</div>
                <div>Bits</div>
            </div>
            <div className="h-1/5 border-2 flex">
                {toggle ?
                    <>
                        <button className="w-1/2 h-full bg-red-500 hover:bg-red-500 active:bg-red-900" disabled={toggle} onClick={e => setToogle(true)}>Sub</button>
                        <button className="w-1/2 h-full bg-green-200 hover:bg-green-500 active:bg-green-900" onClick={e => setToogle(false)}>Badges</button>
                    </>
                    :
                    <>
                        <button className="w-1/2 h-full bg-red-200 hover:bg-red-500 active:bg-red-900" onClick={e => setToogle(true)}>Sub</button>
                        <button className="w-1/2 h-full bg-green-500 hover:bg-green-500 active:bg-green-900" disabled={!toggle} onClick={e => setToogle(false)}>Badges</button>
                    </>
                }


            </div>
        </div>
    )
}

Answer 1

I think you can change the code to the below

useEffect(() => {
  // try adding this
  if (typeof window !== 'undefined') {
     handleResize();
  }

  window.addEventListener('resize', handleResize);

  return () => window.removeEventListener('resize', handleResize);
}, [])

return (
  <Layout>
    <div className="w-full">
      <div className="justify-center items-end md:flex">
        <div className="px-4 pt-4 md:p-0 md:mb-16">
          <div>
            <Image src="/images/logo.png" alt="logo" width={750} height={264} layout="intrinsic" />
          </div>
          {mobileStyle && <LinkBar />}
        </div>
        <div className="text-center">
          <Image src="/images/avatar.png" alt="avatar" width={666} height={850} layout="intrinsic" />
        </div>
        {!mobileStyle && <LinkBar />}
      </div>
    </div>
  </Layout>
)

In SubscriptionStampViewer to reduce repetition you can change the code to:

<div className="h-1/5 border-2 flex">
  <button className={`w-1/2 h-full bg-red-${toggle ? "500" : "200"} hover:bg-red-500 active:bg-red-900`} disabled={toggle} onClick={e => setToogle(true)}>Sub</button>
  <button className={`w-1/2 h-full bg-green-${toggle ? "200" : "500"} hover:bg-green-500 active:bg-green-900`} disabled={!toggle} onClick={e => setToogle(false)}>Badges</button>
</div>