Os React Hooks permitem que você use o estado e outros recursos do React sem ter que construir um componente de classe do React. Usando ganchos, você pode construir aplicativos React totalmente operacionais exclusivamente com Function Components. Não é mais class Example extends React.component {}necessário.

Ganchos Básicos

Ganchos diários para casos de uso diário.

React Basic Hooks
- useState
- useEffect => Este artigo
- useContext => Em breve

useEffect

Documentação oficial para usoEfeito

argumentos da função useEffect

1. Função a ser executada durante o ciclo de vida do componente.
2. Matriz de valores useEffect observa as alterações para acionar o disparo. Passar um array vazio imita os métodos e componentes React baseados em classe .componentDidMountcomponentWillUnmount

Descrição

useEffecté usado para executar o código após cada vez (é possível limitar o disparo da função a certas condições) o componente é renderizado na tela. É possível usar várias instâncias de useEffectem um componente, mas certifique-se de que elas sempre sejam executadas na mesma ordem. Se as funções useStatee useEffectnão dispararem na mesma ordem, você passará por momentos muito ruins (mais informações sobre como realizar a ordem correta abaixo). useEffectas funções também podem limpar a si mesmas retornando uma função.

Exemplos

Compreensão do uso básico e limpeza após a execução.

O código a seguir será executado após cada renderização.

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

Site pessoal
LinkedIn
Instagram