Olá, pessoal, neste passo a passo mostrarei tudo o que você precisa saber para usar a função useEffect do React como um profissional.

Uma breve história

Antes de haver useEffect , havia métodos de ciclo de vida, a saber:

1. componentDidMount
2. componentDidUpdate
3. componentWillUnmount

componentDidUpdate(prevProps, prevState) {
  if (prevProps.foo !== this.props.foo) {/* do something */} 
  if (prevState.bar !== this.state.bar)  {/* do something else */}
}

Com esses métodos de ciclo de vida, podemos lidar de forma confiável com qualquer mudança no estado do componente, então por que mudar para useEffect ?

Insira os componentes sem estado do React

Em um ponto (acredito que já em 2016), a equipe React tomou a decisão de criar componentes React que podem ser instanciados apenas com uma função Javascript regular e tradicional. Então:

import React from "react";
function MyFunc() {
  return <div>Hey!</div>
}

Insira React.useEffect

A nova abordagem para gerenciar mudanças de estado veio na forma de uma função useEffect exposta pela biblioteca React. Então, como podemos recriar nossos amados métodos componentDidMount , componentDidUpdate e componentWillUnmount ? Vamos expandir nossa função sem estado anterior:

import React from "react";
function MyFunc(props) {
const [bar setBar] = React.useState(null);
  
  React.useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentDidUnmount")
    }
  }, []);
  
  React.useEffect(() => {
    console.log("componentDidUpdate when 'bar' changes");
  }, [bar]);
React.useEffect(() => {
    console.log("componentDidUpdate when 'props.foo' changes");
  }, [props.foo]);
return <div>Hey!</div>
}

Outra coisa que adicionamos a este exemplo, React.useState, um gancho de estado, está fora do escopo deste tutorial, mas aprenda mais sobre isso aqui !

Indo além do gerenciamento do ciclo de vida

É ótimo podermos gerenciar o estado de um componente, bem como com os métodos de ciclo de vida anteriores. Entre a simplicidade e a reutilização de funções sem estado e a função React.useEffect, um novo paradigma se tornou disponível para nós: funções com estado reutilizáveis ​​ou, mais comumente chamado: ganchos personalizados .

Um leitor experiente como você provavelmente notou que, com useEffect, não podemos acessar as propriedades prevProps ou prevState como podíamos antes. Não tema! Leia a solução para isso aqui . O motivo pelo qual essa solução funciona é porque React.useRef não dispara novas renderizações do componente. Além disso, useEffect sem dependências dispara toda vez que houver uma nova renderização do componente, independentemente de qual mudança de estado o disparou.

Hello Custom Hooks

Não há melhor exemplo de base para um gancho personalizado do que aquele que o React compartilha em sua documentação oficial aqui . Vamos começar na parte inferior do exemplo e mover nosso caminho para cima:

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Conclusão

Neste tutorial, revisamos:

1. Como gerenciamos o ciclo de vida de um componente antes de useEffect e por que essa abordagem se tornou obsoleta
2. Como podemos usar useEffect para gerenciar com eficácia o ciclo de vida de um componente
3. Como podemos aproveitar a capacidade de reutilização das funções sem estado do React e usarEffect para criar funções com estado reutilizáveis.