Entendendo o hook useEffect no React

Material retirado do site httpsdmitripavlutincomreactuseeffectexplanation 1 useEffect é para efeitos colaterais Um componente React funcional usa props e ou estado para calcular a saída Se o componente funcional faz cálculos que não visam o valor de saída esses cálculos são chamados de efeitos colaterais Exemplos de efeitos colaterais são solicitações de busca manipulação direta de DOM uso de funções de temporizador como setTimeout e muito mais A renderização do componente e a lógica do efeito colateral são independentes Portanto seria um erro realizar efeitos colaterais diretamente no corpo do componente A frequência com que o componente renderiza não é algo que você possa controlar Se o React deseja renderizar o componente você não pode parálo function Greet name const message Hello name Calculates output Bad documenttitle Greetings page Sideeffect return divmessagediv Calculates output Como desacoplar a renderização do efeito colateral Bemvindo useEffect o gancho que executa os efeitos colaterais independentemente da renderização import useEffect from react function Greet name const message Hello name Calculates output useEffect Good documenttitle Greetings page Sideeffect return divmessagediv Calculates output O gancho useEffect aceita 2 argumentos useEffect callback dependências callback é a função de callback que contém lógica de efeito colateral useEffect executa a função de retorno de chamada após React ter enviado as alterações para a tela dependencies é uma matriz opcional de dependências useEffect executa callback somente se as dependências mudaram entre as renderizações Coloque sua lógica de efeito colateral na função de retorno de chamada e em seguida use o argumento dependencies para controlar quando você deseja que o efeito colateral seja executado Esse é o único propósito de useEffect 2 As dependências de useEffect o argumento dependencies de useEffect callback dependencies permite controlar quando o efeito colateral é executado Quando as dependências são A Não fornecido o efeito colateral é executado após cada renderização import useEffect from react function MyComponent useEffect Runs after EVERY rendering B Um array vazio o efeito colateral é executado uma vez após a renderização inicial import useEffect from react function MyComponent useEffect Runs ONCE after initial rendering C Possui props ou valores de estado prop1 prop2 state1 state2 o efeito colateral é executado apenas quando qualquer valor de dependência muda import useEffect useState from react function MyComponent prop const state setState useState useEffect Runs ONCE after initial rendering and after every rendering ONLY IF prop or state changes prop state 3 O efeito colateral no componente aumentou Para invocar um efeito colateral uma vez após a montagem do componente use uma matriz de dependências vazia import useEffect from react function Greet name const message Hello name useEffect Runs once after mounting documenttitle Greetings page return divmessagediv useEffect foi fornecido com um array vazio como um argumento de dependências Quando configurado desta forma o useEffect irá executar o callback apenas uma vez após a montagem inicial Mesmo se o componente for renderizado novamente com uma propriedade de nome diferente o efeito colateral será executado apenas uma vez após a primeira renderização First render Greet nameEric Sideeffect RUNS Second render name prop changes Greet nameStan Sideeffect does NOT RUN Third render name prop changes Greet nameButters Sideeffect does NOT RUN 4 O efeito colateral no componente foi atualizado Cada vez que o efeito colateral usa props ou valores de estado você deve indicar esses valores como dependências import useEffect from react function MyComponent prop const state setState useState useEffect Sideeffect uses prop and state prop state return divdiv O useEffect callback prop state invoca o callback depois que as alterações são confirmadas no DOM e se e somente se algum valor na matriz de dependências prop state foi alterado Usando o argumento dependencies de useEffect você controla quando invocar o efeito colateral independentemente dos ciclos de renderização do componente Novamente essa é a essência do gancho useEffect Vamos melhorar o componente Greet usando a proposta de nome no título do documento import useEffect from react function Greet name const message Hello name useEffect documenttitle Greetings to name name return divmessagediv o nome prop é mencionado no argumento de dependências de useEffect nome O gancho useEffect executa o efeito colateral após a renderização inicial e nas renderizações posteriores apenas se o valor do nome mudar First render Greet nameEric Sideeffect RUNS Second render name prop changes Greet nameStan Sideeffect RUNS Third render name prop doesnt change Greet nameStan Sideeffect does NOT RUN Fourth render name prop changes Greet nameButters Sideeffect RUNS 5 Buscando dados useEffect pode realizar o efeito colateral de busca de dados O seguinte componente FetchEmployeesByQuery busca a lista de funcionários na rede A propriedade de consulta filtra os funcionários buscados import useEffect useState from react function FetchEmployeesByQuery query const employees setEmployees useState useEffect async function fetchEmployees const response await fetch employeesqencodeURIComponentquery const fetchedEmployees await responsejsonresponse setEmployeesfetchedEmployees fetchEmployees query return div employeesmapname divnamediv div useEffect inicia uma solicitação de busca chamando a função assíncrona fetchEmployees após a montagem inicial Quando a solicitação é concluída setEmployees fetchedEmployees atualiza o estado dos funcionários com a lista de funcionários recémobtida Em renderizações posteriores se o objeto de consulta mudar o gancho useEffect inicia uma nova solicitação de busca para um novo valor de consulta Observe que o argumento de callback do useEffect callback não pode ser uma função assíncrona Mas você sempre pode definir e invocar uma função assíncrona dentro do próprio retorno de chamada function FetchEmployeesByQuery query const employees setEmployees useState useEffect CANNOT be an async function async function fetchEmployees fetchEmployees But CAN invoke async functions query Para executar a solicitação de busca uma vez quando o componente é montado simplesmente indique uma lista de dependências vazia useEffect fetchSideEffect 6 A limpeza de efeito colateral Alguns efeitos colaterais precisam ser limpos feche um soquete cancele os temporizadores Se o retorno de chamada de useEffect callback retornar uma função useEffect considera isso como uma limpeza de efeito useEffect Sideeffect return function cleanup Sideeffect cleanup dependencies A limpeza funciona da seguinte maneira A Após a renderização inicial useEffect invoca o retorno de chamada tendo o efeito colateral função de limpeza não é chamada B Em renderizações posteriores antes de invocar o próximo retorno de chamada do efeito colateral useEffect invoca a função de limpeza da execução do efeito colateral anterior para limpar tudo após o efeito colateral anterior então executa o efeito colateral atual C Finalmente após desmontar o componente useEffect invoca a função de limpeza do último efeito colateral Vejamos um exemplo em que a limpeza de efeito colateral é útil O seguinte componente RepeatMessage message My Message aceita uma mensagem prop Então a cada 2 segundos o prop da mensagem é registrado no console import useEffect from react function RepeatMessage message useEffect setInterval consolelogmessage 2000 message return divIm logging to console messagediv Abra a demonstração e digite algumas mensagens O console registra a cada 2 segundos qualquer mensagem que já foi digitada na entrada No entanto você precisa registrar apenas a mensagem mais recente Esse é o caso para limpar o efeito colateral cancele o cronômetro anterior ao iniciar um novo Vamos retornar uma função de limpeza que interrompe o cronômetro anterior import useEffect from react function RepeatMessage message useEffect const id setInterval consolelogmessage 2000 return clearIntervalid message return divIm logging to console messagediv Abra a demonstração e digite algumas mensagens apenas os registros de mensagens mais recentes para o console 7 Conclusão useEffect callback dependencies é o gancho que gerencia os efeitos colaterais nos componentes funcionais argumento de retorno de chamada é uma função para colocar a lógica do efeito colateral dependencies é uma lista de dependências do seu efeito colateral ser adereços ou valores de estado useEffect callback dependencies invoca o callback após a montagem inicial e em renderizações posteriores se algum valor dentro das dependências tiver mudado Como o hook useEffect depende fortemente de closures você também pode precisar obtêlos bem Esteja ciente também do problema de fechamentos obsoletos A próxima etapa para dominar useEffect é entender e evitar a armadilha do loop infinito