Estou tentando entender o useEffect
gancho 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])
javascript
reactjs
react-redux
John_ny
fonte
fonte
Respostas:
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:
Executa uma vez em uma montagem de componente.
Geralmente usado para inicializar o estado dos componentes, buscando dados etc.
Executa a mudança de
arg
valor."On Change" refere-se à comparação superficial com o valor anterior de
arg
(compara o valor daarg
renderização anterior e a atualprevArg === arg ? Do nothing : callback()
).Geralmente usado para executar eventos em adereços / alteração de estado.
useEffect
Dan AbramovuseEffect
API .fonte
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
fonte
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
fonte