El gancho useEffect React ejecutará la función pasada en cada cambio. Esto se puede optimizar para permitir que llame solo cuando cambien las propiedades deseadas.
¿Qué pasa si quiero llamar a una función de inicialización desde componentDidMount y no volver a llamarla en los cambios? Digamos que quiero cargar una entidad, pero la función de carga no necesita ningún dato del componente. ¿Cómo podemos hacer esto usando el gancho useEffect ?
class MyComponent extends React.PureComponent { componentDidMount() { loadDataOnlyOnce(); } render() { ... } }Con ganchos esto podría verse así:
function MyComponent() { useEffect(() => { loadDataOnlyOnce(); // this will fire on every change :( }, [...???]); return (...); }Si solo desea ejecutar la función asignada a useEffect después del renderizado inicial, puede asignarle una matriz vacía como segundo argumento.
function MyComponent() { useEffect(() => { loadDataOnlyOnce(); }, []); return <div> {/* ... */} </div>; }TL;RD
useEffect(yourCallback, []) : activará la devolución de llamada solo después del primer procesamiento.
Explicación detallada
useEffect se ejecuta de forma predeterminada después de cada procesamiento del componente (provocando así un efecto).
Al colocar useEffect en su componente, le dice a React que desea ejecutar la devolución de llamada como un efecto. React ejecutará el efecto después de renderizar y después de realizar las actualizaciones de DOM.
Si pasa solo una devolución de llamada, la devolución de llamada se ejecutará después de cada procesamiento.
Si pasa un segundo argumento (matriz), React ejecutará la devolución de llamada después del primer procesamiento y cada vez que se cambie uno de los elementos de la matriz. por ejemplo, al colocar useEffect(() => console.log('hello'), [someVar, someOtherVar]) - la devolución de llamada se ejecutará después del primer renderizado y después de cualquier renderizado en el que se cambie alguna de someVar o someOtherVar .
Al pasar el segundo argumento a una matriz vacía, React comparará después de cada representación de la matriz y verá que no se cambió nada, por lo que llamará a la devolución de llamada solo después de la primera representación.
Ejecutar una función solo una vez después de que se monte el componente es un patrón tan común que justifica un enlace propio que oculta los detalles de implementación.
const useMountEffect = (fun) => useEffect(fun, [])Úselo en cualquier componente funcional.
function MyComponent() { useMountEffect(function) // function will run only once after it has mounted. return <div>...</div>; }Acerca del gancho useMountEffect
Al usar useEffect con un segundo argumento de matriz, React ejecutará la devolución de llamada después del montaje (representación inicial) y después de que los valores en la matriz hayan cambiado. Dado que pasamos una matriz vacía, se ejecutará solo después del montaje.