Solo estoy jugando con ReactJS y tratando de descubrir algún comportamiento extraño con el gancho useState.
Un componente no debe volver a renderizarse si el estado se establece con el mismo valor primitivo (booleano) que tenía antes
const useScroll = ({positionToCross = 10}) => { const window = useWindow(); const [isPositionCrossed, setIsPositionCrossed] = useState(window.scrollY > positionToCross); useEffect(() => { const onScroll = function (e) { window.requestAnimationFrame(function () { const lastKnownScrollPosition = window.scrollY; setIsPositionCrossed(lastKnownScrollPosition > positionToCross); }); } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener("scroll", onScroll) } }, []); console.log(`useScroll - render window.scrollY = ${window.scrollY.toFixed(0)} isPositionCrossed = `, isPositionCrossed) return {isPositionCrossed} }aquí está la salida de la consola: puede ver que el componente y el gancho se representan dos veces con "verdadero" (después de desplazarse más de 100 px)
"useScroll - render window.scrollY = 101 isPositionCrossed = ", true "useScroll - render window.scrollY = 103 isPositionCrossed = ", trueSi prueba un código simple que al hacer clic en el controlador setState y si hace clic dos veces y en cada estado de actualización con el mismo valor, el componente se vuelve a renderizar. Como reacciona doc dice:
Si actualiza un State Hook al mismo valor que el estado actual, React se rescatará sin renderizar a los niños ni disparar efectos. (React usa el algoritmo de comparación Object.is).
Tenga en cuenta que es posible que React aún necesite renderizar ese componente específico nuevamente antes de rescatar. Eso no debería ser una preocupación porque React no profundizará innecesariamente en el árbol. Si está haciendo cálculos costosos mientras renderiza, puede optimizarlos con useMemo.
Espero que las respuestas de esta publicación y esta discusión de github lo ayuden a comprender por qué sucede esto.