Reagir useEffect em profundidade / use of useEffect?

10

Estou tentando entender o useEffectgancho em profundidade.

Gostaria de saber quando usar qual método e por quê?

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])
John_ny
fonte
3
1. Está sendo chamado no mount e a cada atualização de dependência (qualquer estado / adereços muda). 2. Chamado na montagem apenas porque você especificou uma lista vazia de dependências. 3. Chamado na montagem e na alteração de qualquer uma das dependências listadas
ajobi em 21/01
2
Dan Abramov escreveu um excelente post sobre useEffect: overreacted.io/a-complete-guide-to-useeffect . Você deve lê-lo ;-)
rphonika 21/01

Respostas:

18
useEffect(callback)

Executa em cada renderização de componente.

Normalmente usado para depuração, análogo à execução do corpo da função em cada renderização:

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

Executa uma vez em uma montagem de componente.

Geralmente usado para inicializar o estado dos componentes, buscando dados etc.

Nota : O retorno de chamada executado após a fase de renderização (conhecido como "Gotcha").


useEffect(callback,[arg])

Executa a mudança de argvalor.

"On Change" refere-se à comparação superficial com o valor anterior de arg(compara o valor da argrenderização anterior e a atual prevArg === arg ? Do nothing : callback()).

Geralmente usado para executar eventos em adereços / alteração de estado.

Nota: Várias dependências podem ser fornecidas: [arg1,arg2,arg3...]


Dennis Vash
fonte
1

Se você estiver familiarizado com os métodos do ciclo de vida da classe React, considere usar o Hook Effect como componentDidMount, componentDidUpdate e componentWillUnmount combinados.

1.useEffect sem segundo parâmetro: usado quando queremos que algo aconteça quando o componente acabou de ser montado ou se ele foi atualizado. Conceitualmente, queremos que isso aconteça após cada renderização.

2.useEffect com segundos parâmetros como []: é usado quando queremos que algo aconteça no momento da montagem do componente, se for executado apenas uma vez no momento da montagem.

3.useEffect com alguns argumentos passados ​​no segundo parâmetro: Isso é usado quando queremos que algo aconteça no momento em que o pramter passou por exemplo. args mudaram no seu caso.

Para mais informações. verifique aqui: https://reactjs.org/docs/hooks-effect.html

neelesh bisht
fonte
0

3.useEffect com alguns argumentos passados ​​no segundo parâmetro useEffect (() => {}, [arg])

ele será executado primeiro e será executado novamente se o arg mudar

Lembre-se também de perguntar sobre o retorno dentro do useEffect ... Seus usos para limpeza serão executados quando o componente desmontar

Abu Dujana Mahalail
fonte