Conheça os hooks mais utilizados do react e suas funcionalidades

Conheça os hooks mais utilizados do React e suas funcionalidades

Desde a introdução dos Hooks no React 16.8, a forma como escrevemos componentes funcionais mudou drasticamente. Eles nos permitem adicionar estado e outros recursos do React a componentes de função, eliminando a necessidade de componentes de classe na maioria dos cenários. Se você busca otimizar seu código e entender as ferramentas essenciais para qualquer desenvolvedor React, você veio ao lugar certo. Neste artigo, vamos explorar e conheça os hooks mais utilizados do React e suas funcionalidades, com exemplos práticos para cada um.

O que são React Hooks?

Hooks são funções que permitem “enganchar” os recursos de estado e ciclo de vida do React a partir de componentes de função. Eles promovem código mais limpo, reutilizável e fácil de testar, ao mesmo tempo que resolvem problemas comuns como o aninhamento excessivo de componentes (wrapper hell) e a lógica complexa de ciclos de vida em componentes de classe.

Hooks Essenciais que Você Precisa Dominar

1. useState: Gerenciamento de Estado Simplificado

O useState é, sem dúvida, o hook mais fundamental. Ele permite adicionar variáveis de estado a componentes de função. Ele retorna um par: o valor atual do estado e uma função para atualizá-lo.

Exemplo de useState: Contador Simples

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Você clicou {count} vezes.</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}
export default Contador;

No exemplo acima, count guarda o valor atual do estado, e setCount é a função que usamos para modificá-lo.

2. useEffect: Lidando com Efeitos Colaterais

O useEffect é o seu hook para lidar com efeitos colaterais em componentes de função, como buscar dados de uma API, manipular o DOM diretamente, ou configurar e limpar subscriptions. Ele é um substituto direto para componentDidMount, componentDidUpdate e componentWillUnmount.

Exemplo de useEffect: Fetch de Dados

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

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []); // O array vazio [] indica que o efeito só roda uma vez, como componentDidMount

  return (
    <div>
      <h2>Lista de Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}
export default PostList;

O segundo argumento do useEffect é um array de dependências. Se estiver vazio, o efeito só é executado na montagem do componente. Se contiver variáveis, o efeito é executado sempre que essas variáveis mudarem.

3. useContext: Compartilhando Dados Globalmente

O useContext permite que você se inscreva em um contexto React sem aninhar componentes. É a maneira mais fácil de compartilhar dados, como temas ou informações de autenticação, através da árvore de componentes sem ter que passar props manualmente em cada nível.

Exemplo de useContext: Tema da Aplicação

import React, { createContext, useContext, useState } from 'react';

// 1. Cria o Contexto
const ThemeContext = createContext(null);

// 2. Provedor do Contexto
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(prev => prev === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Consumidor do Contexto
function ThemeButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Mudar para tema {theme === 'light' ? 'escuro' : 'claro'}
    </button>
  );
}

// Componente principal usando o provedor
function App() {
  const { theme } = useContext(ThemeContext); // Acessando o contexto aqui para estilo
  return (
    <ThemeProvider>
      <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#333' : '#fff', padding: '20px' }}>
        <h1>Minha Aplicação com Tema</h1>
        <ThemeButton />
        <p>Este é um parágrafo no tema atual.</p>
      </div>
    </ThemeProvider>
  );
}

export default App;

4. useRef: Acesso Direto a Elementos DOM e Valores Mutáveis

O useRef retorna um objeto ref mutável cuja propriedade .current é inicializada com o argumento passado. Ele é útil para acessar diretamente elementos do DOM (por exemplo, para focar um input), ou para armazenar qualquer valor mutável que não cause re-renderizações quando alterado.

Exemplo de useRef: Focando um Input

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focar Input</button>
    </div>
  );
}
export default InputFocus;

5. useCallback e useMemo: Otimização de Performance

Estes hooks são focados em otimização de performance. Eles memorizam funções (useCallback) ou valores (useMemo) para evitar recriações desnecessárias e re-renderizações em componentes filhos, especialmente em componentes que recebem funções ou dados caros.

useCallback: Memorizando Funções

O useCallback retorna uma versão memorizada do callback passado que só muda se uma das dependências mudar. É útil para evitar que componentes filhos se re-renderizem desnecessariamente quando funções são passadas como props.

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

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // Esta função só será recriada se 'count' mudar
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, ); // Dependência: 'count'

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Incrementar</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <p>Texto: {text}</p>
    </div>
  );
}
export default ParentComponent;

useMemo: Memorizando Valores

O useMemo retorna um valor memorizado. Ele só recalculará o valor memorizado quando uma das dependências tiver sido alterada. É útil para cálculos custosos ou para evitar que objetos sejam recriados.

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

function Calculadora() {
  const [number, setNumber] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  const expensiveCalculation = (num, mult) => {
    console.log('Calculando...'); // Verifique no console quando isso é executado
    for (let i = 0; i < 100000000; i++) {
      num += mult;
    }
    return num;
  };

  // 'memoizedValue' só será recalculado se 'number' ou 'multiplier' mudar
  const memoizedValue = useMemo(() => expensiveCalculation(number, multiplier), [number, multiplier]);

  return (
    <div>
      <input type="number" value={number} onChange={e => setNumber(parseInt(e.target.value))} />
      <input type="number" value={multiplier} onChange={e => setMultiplier(parseInt(e.target.value))} />
      <p>Resultado da conta: {memoizedValue}</p>
    </div>
  );
}
export default Calculadora;

6. useReducer: Alternativa ao useState para Lógica Complexa

O useReducer é uma alternativa ao useState para gerenciar estados mais complexos, que envolvem múltiplas sub-propriedades ou onde a próxima alteração do estado depende do estado anterior. Ele é inspirado no padrão Redux e é excelente para gerenciar o estado global de uma aplicação, como o carrinho de compras ou informações de usuário.

Exemplo de useReducer: Gerenciando Tarefas

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

const initialState = [];

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_TASK':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE_TASK':
      return state.map(task =>
        task.id === action.payload ? { ...task, completed: !task.completed } : task
      );
    case 'REMOVE_TASK':
      return state.filter(task => task.id !== action.payload);
    default:
      return state;
  }
}

function TaskList() {
  const [tasks, dispatch] = useReducer(reducer, initialState);
  const [newTaskText, setNewTaskText] = useState('');

  const handleAddTask = () => {
    if (newTaskText.trim()) {
      dispatch({ type: 'ADD_TASK', payload: newTaskText });
      setNewTaskText('');
    }
  };

  return (
    <div>
      <h2>Lista de Tarefas com useReducer</h2>
      <input
        type="text"
        value={newTaskText}
        onChange={(e) => setNewTaskText(e.target.value)}
        placeholder="Adicionar nova tarefa"
      />
      <button onClick={handleAddTask}>Adicionar</button>
      <ul>
        {tasks.map(task => (
          <li key={task.id} style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
            {task.text}
            <button onClick={() => dispatch({ type: 'TOGGLE_TASK', payload: task.id })} style={{ marginLeft: '10px' }}>
              {task.completed ? 'Desfazer' : 'Concluir'}
            </button>
            <button onClick={() => dispatch({ type: 'REMOVE_TASK', payload: task.id })} style={{ marginLeft: '5px', color: 'red' }}>
              Remover
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default TaskList;

Conclusão

Dominar os Hooks do React é um passo crucial para qualquer desenvolvedor que busca escrever código mais limpo, eficiente e moderno. Com eles, você pode gerenciar estados, efeitos colaterais, contextos e otimizar a performance de seus componentes funcionais de forma elegante e poderosa. Esperamos que este guia completo ajude você a conheça os hooks mais utilizados do React e suas funcionalidades e a aplicá-los em seus próprios projetos. Pratique, experimente e veja a diferença que eles farão no seu fluxo de trabalho!