Usando os principais hooks do React: useState e useEffect

Os dois principais Hooks que você encontrará com frequência são useState e useEffect. Neste post, vamos explorar como usar esses Hooks para criar componentes funcionais no React.

O que são Hooks no React?

Hooks são um recurso especial no React que possibilita a conexão aos elementos internos do React, como o estado do componente e os ciclos de vida, diretamente em componentes funcionais. Com os Hooks, você pode adicionar funcionalidades avançadas aos seus componentes funcionais, tornando-os mais poderosos e flexíveis.

Existem vários Hooks disponíveis, mas os dois principais que abordamos neste post são: useState e useEffect

UseState

Este Hook permite que você adicione e manipule o estado em componentes funcionais. Com ele, você pode declarar variáveis de estado e fornecer funções para atualizar essas variáveis. O React se encarrega de preservar o estado entre renderizações e atualizar o componente quando o estado muda.

import React, { useState } from 'react';

function Contador() {

  const [count, setCount] = useState(0);

  return (
    <div>
      
Contagem: {count}

      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <button onClick={() => setCount(count - 1)}>Decrementar</button>
    </div>
  );
}

export default Contador;

Neste exemplo, criamos um componente funcional Contador que possui um estado chamado count. Usamos a função useState para inicializar esse estado com o valor 0 e a função setCount para atualizá-lo quando os botões são clicados.

UseEffect

O Hook useEffect é usado para lidar com efeitos colaterais em componentes funcionais. Isso inclui a execução de código após a renderização do componente, como chamadas de API, assinaturas de eventos ou manipulação do DOM.

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

function ExemploDeEfeito() {
  const [data, setData] = useState([]);


  useEffect(() => {

    setTimeout(() => {
      setData(['Item 1', 'Item 2', 'Item 3']);
    }, 1000);
  }, []);

  return (
    <div>
      <h2>Dados da API:</h2>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ExemploDeEfeito;

Neste exemplo, criamos um componente funcional ExemploDeEfeito que utiliza o useEffect para simular uma chamada de API assíncrona e atualizar o estado data após um atraso de 1 segundo. O segundo argumento vazio [] garante que o efeito seja executado apenas uma vez após a renderização inicial.

Conclusão

Em conclusão, os Hooks useState e useEffect do React são ferramentas fundamentais para o desenvolvedor frontend moderno. Eles simplificam a gestão de estado e a manipulação de efeitos colaterais em componentes funcionais, tornando o código mais limpo e fácil de manter.