#NLW04 - REACT

useEffect()?

Não faz muito tempo desde a primeira vez que vi um código feito com React, menos de uma semana, na verdade.

Porém não foi um choque muito grande por já ter visto códigos em Angular, por exemplo. Há algum tempo tenho percebido que apenas olhar, mesmo que não entenda, para outros códigos ajuda muito a ter facilidade em reconhecer e relacionar prática com conceito quando você começa a estudar de fato.

Cada biblioteca e cada framework tem suas particularidades e penso em falar mais sobre o que aprendi na Trilha ReactJS da #NextLevelWeek da Rocketseat, mas hoje o espaço é do useEffect().

Quando o Diego explicou que hooks são efeitos colaterais, anotei no caderno com cores coloridas para procurar mais sobre em outro momento. E cá estou.

De acordo com a documentação do React um Effect Hook te permite executar efeitos colaterais em componentes funcionais. Mas o que pode ser isso?

Buscar dados, configurar uma subscription, e mudar o DOM manualmente dentro dos componentes React são exemplos de efeitos colaterais.

Um efeito colateral acontece depois de alguma coisa, certo? Os efeitos são geralmente executados depois que o React atualiza a DOM.

Então o que o useEffect faz?

O React guarda as informações do efeito para serem utilizadas depois, por exemplo nesse código:

useEffect(() => {
    if (isActive && time > 0) {
      countdownTimeOut = setTimeout(() => {
        setTime(time - 1);
      }, 1000);
    } else if (isActive && time === 0) {
      setHasFinished(true);
      setIsActive(false);
      startNewChallenge();
    }
  }, [isActive, time]);

Os efeitos agendados com useEffect não bloqueiam o navegador de atualizar a tela, então os efeitos são mais sutis e parecem muito mais fluidos quando utilizados. Por exemplo, no momento em que vemos uma nova imagem e um novo texto chamado pelo startNewCHallenge(), que só acontece quando o countdown está ativo, porém zerado após cumprir sua função, vemos a mudança de imagem e texto no bloco de Desafios sem alterações no resto do layout. A maioria dos efeitos não precisa acontecer de forma síncrona e pensando assim, as coisas fazem um pouco mais de sentido.

Em breve irei separar os tópicos que aprendi e tentar falar mais sobre, assim como as coisas que ainda quero estudar. Documentar o que eu estou aprendendo sempre foi uma vontade minha, mas sempre ficava em segundo plano. Agora graças a #NextLevelWeek04 da Rocketseat, tenho algumas inspirações pra começar!