Estoy trabajando con paginación compensada en reacción mecanografiada.
Tengo dos estados que contienen pageNumber y offset . La página predeterminada se establece en 1 y el desplazamiento predeterminado se establece en 0 , como puede ver a continuación.
Gancho useState
const [currentPage, setCurrentPage] = useState(1); const [calculatedOffset, setCalculatedOffset] = useState(0); Al cargarse, el componente obtiene pageNumber calculatedOffset del localStorage y actualiza los valores predeterminados de useState.
useEffect Hook
useEffect(() => { if (typeof window !== "undefined") { const integerPage = parseInt(localStorage.getItem("currentPage") || "1"); setCurrentPage(integerPage); const integerOffset = parseInt(localStorage.getItem("calculatedOffset") || "0"); setCalculatedOffset(integerOffset); } }, []);EL PROBLEMA:
El problema al que me enfrento es que cada vez que se carga el componente, se carga con los valores del estado predeterminado, es decir, pageNumber: 1, calculatedOffset: 0 durante medio segundo y luego lo cambia al estado actualizado que fue el que se actualizó cuando el useEffect el gancho corrió. Entonces, en cada carga, el componente muestra los datos del estado predeterminado antes de terminar desde el estado actualizado obtenido de localStorage.
¿Hay alguna manera de que pueda hacer que el componente solo se cargue cuando los estados hayan terminado en sus valores finales y evitar que los estados antiguos parpadeen durante medio segundo cada vez que se carga el componente?
useEffect se ejecuta cuando el componente se ha renderizado por completo. Entonces, antes de que eso suceda, useState ya se usa para inicializar las variables según las cuales se representan inicialmente sus componentes.
Para evitar el renderizado inicial de acuerdo con el valor inicializado de useState , establece ambos en null en useState y en el componente, renderiza los elementos condicionalmente:
{!currentPage || element}o
{currentPage && element}