Los Hooks de React te permiten usar el estado y otras funciones de React sin tener que crear un componente de clase de React. Usando ganchos, puede construir aplicaciones React totalmente operativas exclusivamente con componentes de funciones. No se requiere más class Example extends React.component {}.

Ganchos Básicos

Ganchos cotidianos para casos de uso cotidiano.

Hooks básicos de React
- useState
- useEffect => Este artículo
- useContext => Próximamente

efecto de uso

Documentación oficial de usoEfecto

argumentos de la función useEffect

1. Función que se ejecutará durante el ciclo de vida del componente.
2. Matriz de valores useEffect observa los cambios para activar la activación. Pasar una matriz vacía imita los métodos componentDidMounty componentes de React basados ​​en una clase componentWillUnmount.

Descripción

useEffectse utiliza para ejecutar el código después de cada vez (es posible limitar la activación de la función a ciertas condiciones) el componente se representa en la pantalla. Es posible usar varias instancias de useEffecten un componente, pero asegúrese de que siempre se ejecuten en el mismo orden. Si las funciones useStatey useEffectno se activan en el mismo orden, lo pasará muy mal (más información sobre cómo lograr el orden correcto a continuación). useEffectlas funciones también pueden limpiarse después de devolver una función.

Ejemplos

Comprender el uso básico y la limpieza posterior a la ejecución.

El siguiente código se ejecutará después de cada renderizado.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Sitio web personal
LinkedIn
Instagram