Usando o gancho useEffect do React

Usar useEffecté provavelmente a melhor parte do React Hooks. Ele ajuda a reduzir a confusão dos métodos de ciclo de vida do componente e, mais importante, ajuda a separar diferentes lógicas que podem aparecer nos métodos de ciclo de vida. Hoje, vamos ver um exemplo para cada um dos principais benefícios useEffectcom exemplos que são do site React.

Primeiro, vamos ver como o gancho pode ajudar a reduzir a desordem geral. Este primeiro caso será como seu método típico de ciclo de vida baseado em classe incluiria em um caso básico sem desmontar.

componentDidMount() { 
    document.title = `You clicked ${this.state.count} times`;  
}
componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;  
}

useEffect(() => {
    document.title = `You clicked ${count} times`;  
});

Como você já pode ver no exemplo acima, isso irá refletir o quão bom useEffecté no caso de usar chamadas de API e desmontar. Abaixo está um exemplo simples de como seriam seus métodos de ciclo de vida se você estivesse usando um ChatAPI para assinar o status online de um amigo.

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
componentWillUnmount() {    
    ChatAPI.unsubscribeFromFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
handleStatusChange(status) {    this.setState({      isOnline: status.isOnline    });  }

useEffect(() => {    
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);    
    }
ChatAPI.subscribeToFriendStatus(
        props.friend.id, 
        handleStatusChange
    );
return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(
            props.friend.id, 
            handleStatusChange );    
    };  
});

Não esqueça que useEffecté executado em cada re-renderização! Isso pode ser um exagero se sua atualização for graficamente cara ou uma chamada de API que não é necessária constantemente. Uma das melhores partes useEffecté como é fácil otimizar algo.

useEffect(() => {
    const subscription = props.source.subscribe();
return () => {
      subscription.unsubscribe();
    };
},
  [props.source],
);

useEffect(() => {}, []);

Além disso, se você adicionar um array vazio useEffectcomo segundo argumento, ele será executado apenas uma vez e, em seguida, será desmontado, se necessário. Isso é semelhante a se você estivesse usando apenas componentDidMounte componentWillUnmountsem usar componentDidUpdateEste é um truque crucial para saber se você deseja executá-lo apenas uma vez no início.

Agora, esses exemplos foram bem simples e espero ter conseguido guiá-lo na transição do uso de Classes para Hooks com mais facilidade. useEffecté uma ótima ferramenta no uso de Hooks e ajuda a diminuir a carga de gerenciamento de funções volumosas de ciclo de vida gigantes que podem se acumular em sua base de código.

Cada um useEffecté sua própria função que pode manipular sua própria montagem, atualizações e desmontagens. Eu sinto que isso ajuda os desenvolvedores “externos” a manter mais facilmente e, se necessário, fazer alterações nessa parte da base de código sem estragar acidentalmente outras partes do código. Eles também podem facilmente fazer alterações ou adições à otimização.

Eles podem saber com segurança que a useEffectfunção que estão modificando está lidando apenas com o necessário para essa assinatura ou atualização específica. Claro, assumindo que o desenvolvedor original não adicionou lógica não relacionada a essa função! Eu sei que você nunca faria algo assim, certo?

Obrigado por ler meu pequeno schpiel sobre o uso do useEffectgancho no React. Se você gostou (e aprendeu alguma coisa), eu estava pensando em tocar no assunto de otimização no React também em um futuro próximo, em particular, useStatejá que ainda não falei sobre isso. Independentemente disso, obrigado pelo seu tempo e fique seguro!