Tengo un componente con un método useEffect dentro. Y dentro de este método useEffect, allí creé un useRef para manejar algunos efectos de desplazamiento y animaciones. En particular, const ref = useRef(null); . Funciona bien, sin embargo, al cambiar de vista donde no se usa esta referencia, da un error. Por favor, vea el código y la imagen a continuación:

 import React, { useEffect, useRef, useCallback } from 'react'; import styled from 'styled-components'; import { Anchor, Link } from '../components/AllSvgs'; const Container = styled.div` position: relative; `; const Slider = styled.div` position: fixed; top: 0; right: 2rem; display: flex; justify-content: center; align-items: center; flex-direction: column; transform: translateY(-100%); .chain { transform: rotate(135deg); } `; const PreDisplay = styled.div` position: absolute; top: 0; right: 2rem; `; const AnchorComponent = (props) => { const ref = useRef({ style: { transform: null } }) const hiddenRef = useRef(); useEffect(() => { const handleScroll = () => { let scrollPosition = window.pageYOffset; let windowSize = window.innerHeight; let bodyHeight = document.body.offsetHeight; let diff = Math.max(bodyHeight - (scrollPosition + windowSize)); //diff*100/scrollposition let diffP = (diff * 100) / (bodyHeight - windowSize); ref.current.style.transform = `translateY(${-diffP}%)`; window.pageYOffset > 5 ? (hiddenRef.current.style.display = 'none') : (hiddenRef.current.style.display = 'block'); }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); ref.current.style.transform = null; } }, []); return ( <Container> <PreDisplay ref={hiddenRef} className='hidden'> <Anchor width={70} height={70} fill='currentColor' /> </PreDisplay> <Slider ref={ref}> {[...Array(props.number)].map((x, id) => { return ( <Link key={id} width={25} height={25} fill='currentColor' className='chain' /> ); })} <Anchor width={70} height={70} fill='currentColor' /> </Slider> </Container> ); }; export default AnchorComponent;

ingrese la descripción de la imagen aquí

Creo que se supone que debo desmontar la referencia, sin embargo, cuando hago esto, no funciona. Por favor ver más abajo:

 return () => { window.removeEventListener('scroll', handleScroll); ref.current = null; }

Alguien sabe que puede ser? Gracias