React intermittent memory leak from a scroll-to-top component

Question

While debugging I've noticed within the console, I'm getting the warning message of:

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.

However, the warning is only thrown minimally and I cannot seem to figure out how to replicate the issue when navigating and scrolling through my site and using the component button.

code:

import React, { useContext, useState, useEffect } from 'react'

// React Icons
import { BiUpArrowAlt } from 'react-icons/bi'

// Context
import { ThemeContext } from '../../context/ThemeProvider'

const ScrollTop = () => {
  const { windowWidth, windowHeight } = useContext(ThemeContext)
  const [scrollTop, setScrollTop] = useState(0)

  useEffect(() => {
    const onScroll = () => setScrollTop(window.pageYOffset <= 0 ? 0 : window.pageYOffset)
    window.addEventListener('scroll', onScroll)
  }, [scrollTop])

  return windowHeight / 2 <= scrollTop && windowWidth > 991 ? (
    <div className="row">
      <div className="col-lg-4">
        <div
          aria-hidden="true"
          className="backTop"
          onClick={() => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })}
        >
          <BiUpArrowAlt className="icon" />
        </div>
      </div>
    </div>
  ) : (
    ''
  )
}

export default ScrollTop

Research

Tried to find if I can learn why this might be occurring after reading:

Per this answer and Dan Abramov it mentions that this would be removed in the future from likely false positives.

Since I'm unable to replicate this error, is this likely a false positive, or is there something I am misunderstanding and can improve on in my useEffect that could be firing the warning?

React intermittent memory leak from a scroll-to-top component

Research

0 Answers0