Um dos problemas mais comuns que você precisa resolver em uma aplicação React é a busca de dados externos. Em geral, esse é um dos primeiros problemas que você aprende a resolver, mas a maioria das implementações comete um erro simples, atualiza o estado de um componente desmontado .

Vamos começar com um exemplo bem simples, um componente do Blog que busca os dados relacionados aos posts, mostra uma mensagem de carregamento quando a busca está em andamento, mostra um erro em caso de erros, e em outro caso, mostra a lista de posto.

const Blog = () => {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState('idle');
  const [error, setStatus] = useState(null);
useEffect(() => {
    const fetchData = async () => {
      setStatus('loading');
      try{
        setStatus('loading');
        const posts = await getAllPosts();
        setPosts(posts);
        setStatus('finished');
       } catch(e) {
         setStatus('error');
         setError(e);
       }
    }
  }, []);
if(status == 'error') return <p>Error while loading data</p>;
  if(status == 'loading') return <p>Loading...<p>;
  return <PostGrid posts={posts} />
};

A getAllPostsfunção é uma função assíncrona que é aguardada, essa função pode demorar muitos segundos para voltar e quando retorna, o código tenta chamar a setPostsfunção, mas o que aconteceu quando o componente é desmontado antes desse momento? Você recebe um aviso porque não pode definir o estado de um componente desmontado.

const posts = await getAllPosts();
setPosts(posts);  # Warning: Can't perform a React state update on an unmounted component.
setStatus('finished');

A chave é definir o estado somente se o componente estiver montado, neste caso, você precisa ter certeza de que o componente está montado após a getAllPostschamada. Para isso, vamos usar um gancho que abstrai o mecanismo para verificar se o componente atual está montado.

const useIsMounted = () => {
  const isMounted = React.useRef(false);     // (1)
  React.useEffect(() => {
    isMounted.current = true;                // (2)
    return () => isMounted.current = false;  // (3)
  }, []);                                    // (3)
  return isMounted.current;
}

Agora, você pode usá-lo com seu componente original

const Blog = () => {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState('idle');
  const [error, setStatus] = useState(null);
  const isMounted = useIsMounted();
useEffect(() => {
    const fetchData = async () => {
      setStatus('loading');
      try{
        const posts = await getAllPosts();
        if(isMounted) {
          setPosts(posts);                    // 1
          setStatus('finished');
        }
} catch(e) {
          if(isMounted) {
            setStatus('error');               // 2
            setError(e);
          }
       }
    }
  }, []);
if(status == 'error') return <p>Error while loading data</p>;
  if(status == 'finished') return <PostList posts={posts} />
  return <p>Loading...<p>;
};

Conclusões

Tentar atualizar o estado de um componente desmontado é um problema muito comum em apps reacts, esse problema geralmente é apresentado quando você busca alguns dados externos, mas o mesmo problema é apresentado quando você usa algum evento assíncrono que aciona algumas alterações no estado após sua conclusão.

Obrigado por ler!

Isso é tudo por este post, espero que o conteúdo tenha sido do seu agrado, até o próximo post.

Mais conteúdo em PlainEnglish.io . Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter e LinkedIn . Junte-se à nossa comunidade Discord .