Estoy aprendiendo Next.js. Tengo una página A y una página B con el componente C; cuando salto a la página, el componente C se volverá a procesar. ¿Cómo puedo evitar esto? Lo siento, tal vez no me expresé claramente, no quiero decir que useEffect se ejecutará dos veces, el componente C ya se ha renderizado en la página A y no debería volver a renderizarse en la página B, porque el componente C no cambia, useEffect soy solo yo. Se usa para determinar si el componente se renderiza.
página A:
import Link from "next/link"; import C from "@/components/test"; export default function A() { return ( <div> <h1>A</h1> <C /> <Link href="/b">B</Link> </div> ); }página B:
import C from "@/components/test"; import Link from "next/link"; export default function B() { return ( <div> <h1>B</h1> <C /> <Link href="/a">A</Link> </div> ); }componente C:
import { useEffect } from "react"; export default function C() { useEffect(() => { console.log(1); }, []); return <div>component C</div>; }Si está ejecutando su aplicación en modo de desarrollo, entonces ocurre este problema. Para solucionar este problema, simplemente abra el archivo next.config.js y cambie reactStrictMode a false como se muestra a continuación:
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false, presets: ["next/babel"] }; module.exports = nextConfig;Si está utilizando React 18+, puede ser causado por StrictMode
Puede eliminar StrictMode para probar, si funciona sin StrictMode , probablemente lo esté haciendo mal.
Ver más sobre useEffect en React 18
Notas:
console.log en un useEffect se silencia en el segundo renderizado (ver la nota oficial :)En React 17, React modifica automáticamente los métodos de la consola como console.log() para silenciar los registros en la segunda llamada a las funciones del ciclo de vida. Sin embargo, puede causar un comportamiento no deseado en ciertos casos en los que se puede utilizar una solución alternativa.
A partir de React 18, React no suprime ningún registro. Sin embargo, si tiene instalado React DevTools, los registros de la segunda llamada aparecerán ligeramente atenuados. React DevTools también ofrece una configuración (desactivada de forma predeterminada) para suprimirlos por completo.
[] ) no es un gancho para ejecutar cuando se monta el componente. (ver la nota oficial :)Si desea ejecutar un efecto y limpiarlo solo una vez (al montar y desmontar), puede pasar una matriz vacía ([]) como segundo argumento. Esto le dice a React que su efecto no depende de ningún valor de accesorios o estado, por lo que nunca necesita volver a ejecutarse. Esto no se maneja como un caso especial: se deriva directamente de cómo funciona siempre la matriz de dependencias.
Si pasa una matriz vacía ([]), los accesorios y el estado dentro del efecto siempre tendrán sus valores iniciales. Si bien pasar [] como segundo argumento está más cerca del modelo mental familiar componentDidMount y componentWillUnmount, generalmente hay mejores soluciones para evitar volver a ejecutar los efectos con demasiada frecuencia. Además, no olvide que React difiere la ejecución de useEffect hasta que el navegador haya pintado, por lo que hacer trabajo adicional es un problema menor.