Estoy usando React hooks useEffect para obtener el ancho y el alto del container . Los problemas que quiero resolver son:
window.innerHeight y esto en sí bloquea mi salida en el renderizado inicial ya que estoy usando el estado de dimension para hacer algo en primer lugar.Soy nuevo en este React Hooks y desconozco muchas cosas. Quiero un código simple que haga el trabajo perfectamente.
Mi código es el siguiente:
function debounce(fn, ms) { let timer; return (_) => { clearTimeout(timer); timer = setTimeout((_) => { timer = null; fn.apply(this, arguments); }, ms); }; } export default function App() { const [dimensions, setDimensions] = useState({ height: window.innerHeight, width: window.innerWidth, }); useEffect(() => { const debouncedHandleResize = debounce(function handleResize() { setDimensions({ height: window.innerHeight, width: window.innerWidth, }); }, 1000); document .getElementById('SldBox') .addEventListener('resize', debouncedHandleResize); return (_) => { document .getElementById('SldBox') .removeEventListener('resize', debouncedHandleResize); }; }); return ( <div className='container' id='SldBox'> My Container </div> ); }Genial problema, muchos ganchos para aprender aquí.
Aquí hay una muestra de cómo podemos usar:
https://codesandbox.io/s/keen-poincare-c8mcz?file=/src/App.js
useState : Has hecho un buen uso de este. No hace falta explicarlo más.
useRef : cree una referencia y luego pásela a su elemento.
export default function App() { const ref = useRef(null); return ( <div ref={ref}>stuff</div> ); }Ahora, después del primer renderizado, podemos hacer referencia al elemento con bastante facilidad.
useMemo : para configurar un observador para un elemento, podemos usar ResizeObserver . Si no envolviéramos esto en useMemo , estaríamos recreando esta función en cada procesamiento, lo cual es un desperdicio. useMemo soluciona esto. También agregamos una matriz de dependencias para useMemo como segundo argumento que incluye ref.current . De esta manera, cada vez que cambie la referencia (como en el primer render), la función elementObserver se volverá a calcular.
const elementObserver = useMemo(() => { return new ResizeObserver(() => { debounce(() => { if (!ref.current) return; setDimensions({ height: ref.current.clientHeight, width: ref.current.clientWidth }); }, 1000)(); }); }, [ref.current]); useEffect : ahora podemos usar useEffect para configurar el observador cuando se monta el componente. Nuevamente, incluimos una matriz de dependencia que le dice al efecto que active la función de devolución de llamada proporcionada si se cambia alguno de estos valores. También siempre se ejecutará cuando se monte el componente, por lo que debemos verificar que existe una referencia para este. Además, asigne el elemento a una variable en el efecto para la función de "limpieza".
useEffect(() => { if (!ref) return; const element = ref.current; elementObserver.observe(element); return () => { elementObserver.unobserve(element); }; }, [ref.current, elementObserver]);