React e Hooks: Construindo Componentes Funcionais e Reativos

Introdução

Com o crescimento exponencial do React como uma das bibliotecas mais populares para o desenvolvimento de interfaces de usuário, compreender seus conceitos fundamentais é essencial para qualquer desenvolvedor. Neste contexto, os Hooks surgem como uma maneira poderosa de trabalhar com componentes funcionais, permitindo gerenciar estado e efeitos colaterais de forma mais intuitiva e concisa. Este artigo explora a utilização de Hooks, focando em como utilizá-los para construir componentes reativos e eficientes.

Contexto ou Teoria

Os Hooks foram introduzidos no React 16.8 e marcam uma mudança significativa na forma como os desenvolvedores interagem com componentes. Antes dos Hooks, o gerenciamento de estado era limitado a componentes de classe, o que tornava o código mais verboso e difícil de manter. Com os Hooks, é possível usar estado e outras funcionalidades do React sem escrever uma classe.

Os dois Hooks mais utilizados são o useState, que permite adicionar estado local a componentes funcionais, e o useEffect, que permite realizar efeitos colaterais, como dados de busca e manipulação de DOM. Essa nova abordagem não apenas torna o código mais limpo, mas também promove a reutilização de lógica entre componentes.

Demonstrações Práticas

Vamos desenvolver um pequeno aplicativo de contagem que demonstra o uso de useState e useEffect.

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

function Counter() {
  // Declara uma nova variável de estado chamada "count"
  const [count, setCount] = useState(0);

  // O efeito é executado sempre que o componente é montado ou "count" é atualizado
  useEffect(() => {
    document.title = `Você clicou ${count} vezes`;
  }, [count]); // O efeito depende de "count"

  return (
    

      
Você clicou {count} vezes
       setCount(count + 1)}>
        Clique aqui
      
    
  );
}

export default Counter;

No exemplo acima, o useState é utilizado para definir a variável de estado count e a função setCount para atualizá-la. O useEffect é usado para alterar o título do documento sempre que o valor de count muda. Isso ilustra como Hooks permitem a gestão de estado e efeitos colaterais de maneira eficiente e organizada.

Outro exemplo prático é um componente que busca dados de uma API e exibe os resultados. Vamos usar o useEffect para realizar a busca quando o componente é montado.

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(error => console.error('Erro ao buscar dados:', error));
  }, []); // O efeito é executado apenas uma vez após a montagem

  if (loading) return 
Carregando...
;

  return (
    

      {data.map(post => (
        
{post.title}
      ))}
    
  );
}

export default DataFetchingComponent;

Neste código, uma chamada à API é feita assim que o componente é montado, e os dados recebidos são armazenados na variável de estado data. O estado loading é utilizado para indicar se os dados ainda estão sendo carregados. Assim que a busca é concluída, os dados são exibidos em uma lista.