Dominando o Hook useComponentWillUnmount do React

Introdução

Neste laboratório, exploraremos o hook useComponentWillUnmount em React, que nos permite executar uma função de callback imediatamente antes que um componente seja desmontado e destruído. Ao usar este hook, podemos realizar quaisquer tarefas de limpeza necessárias, como remover ouvintes de eventos ou cancelar quaisquer requisições pendentes. Este laboratório fornecerá experiência prática no uso deste hook e na compreensão de seu comportamento, que é semelhante ao método de ciclo de vida componentWillUnmount() em componentes de classe.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

React useComponentWillUnmount Hook

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Para executar um callback imediatamente antes que um componente seja desmontado e destruído, você pode usar o hook useEffect() com um array vazio como o segundo argumento. Retorne o callback fornecido para ser executado apenas uma vez antes da limpeza. Este comportamento é semelhante ao método de ciclo de vida componentWillUnmount() dos componentes de classe. Você também pode usar o seguinte trecho de código para criar um hook personalizado useComponentWillUnmount() que recebe uma função onUnmountHandler como argumento e a executa antes que o componente seja desmontado:

const useComponentWillUnmount = (onUnmountHandler) => {
  React.useEffect(
    () => () => {
      onUnmountHandler();
    },
    []
  );
};

Você pode então usar este hook personalizado em seu componente funcional da seguinte forma:

const Unmounter = () => {
  useComponentWillUnmount(() => console.log("Component will unmount"));

  return <div>Check the console!</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<Unmounter />);

Isso registrará "Component will unmount" no console quando o componente estiver prestes a ser desmontado.

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório React useComponentWillUnmount Hook. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.