javascript - Cómo llamar a la función de carga con React useEffect solo una vez

reactjs react-hooks

Question

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é sucede si deseo llamar a una función de inicialización desde componentDidMount y no volver a llamarla en caso de 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 (...);
}

Answer 1

Uso personalizadoMountEffect gancho

Ejecutar una función solo después de los montajes de componentes es un patrón común y justifica un enlace propio que oculta los detalles de la implementación.

const useMountEffect = (fun) => useEffect(fun, [])

Entonces utilízalo en cualquier parte de tu código.

function MyComponent() {
    useMountEffect(() => {
        loadDataOnlyOnce()
    });
    return (...);
}

Acerca del gancho useMountEffect

Cuando se usa useEffect con un segundo argumento de matriz, React ejecutará la devolución de llamada después del montaje (procesamiento inicial) y después de que uno o más valores de la matriz hayan cambiado. Ya que pasamos una matriz vacía, se ejecutará solo después del montaje.

useMountEffect implementa la visión de los ganchos React: componiendo ganchos personalizados, basados ​​en los ganchos nativos / primitivos.

Answer 2

Pase una matriz vacía como segundo argumento para useEffect . Esto efectivamente le dice a React, citando los reactjs.org/docs/… :

Esto le dice a React que su efecto no depende de ningún valor de props o estado, por lo que nunca necesita volver a ejecutarse.

Aquí hay un fragmento que puede ejecutar para mostrar que funciona:

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch(''https://randomuser.me/api/'')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : ''Loading...''}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById(''app''));

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Answer 3

Si solo desea ejecutar la función dada para useEffect después del procesamiento inicial, puede asignarle una matriz vacía como segundo argumento.

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}

Answer 4

TL; DR

useEffect(yourCallback, []) : activará la devolución de llamada solo después del primer procesamiento.

Explicación detallada

useEffect ejecuta de forma predeterminada después de cada procesamiento del componente (causando 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 la representación 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 procesamiento y después de cualquier procesamiento se someVar uno de someVar o someOtherVar .

Al pasar el segundo argumento a una matriz vacía, React comparará después de cada render la matriz y no verá que se haya cambiado nada, por lo que se llama a la devolución de llamada solo después del primer render.