La cuestión es que tengo algo así en React:
const breakpointRef = useRef();
const handleWindowResize = () => {
const windowWidth = window.innerWidth;
if (windowWidth < mobile) breakpointRef.current = 'mobile';
// ... rest of the logic
console.log(breakpointRef.current);
}
useEffect(() => {
window.addEventListener('resize', handleWindowResize);
return () => window.removeEventListener('resize', handleWindowResize);
}, [])
return (
<Viewport.Provider value={{ breakpoint: breakpointRef }}>
{children}
</Viewport.Provider>
)
Los hijos están envueltos en el Provider y está usando el contexto, pero el valor de breakpointRef.current me sale undefined, sin embargo al cambiar el tamaño de la pantalla, el console.log esta imprimiendo el valor esperado. No quiero almacenar el valor del breakpoint actual en un estado, porque esto causaria muchisimos renders, basicamente uno por cada pixel que cambiará el tamaño de la pantalla, y lo que quiero es usar esa referencia en los hijos para añadir clases de css o quitarlas, accediendo a la referencia del propio hijo.