Explorando os Principais Hooks do React: Uma Jornada pela Otimização e Gerenciamento de Estado em Componentes

Neste guia, exploraremos todos os principais React Hooks, que são funções especiais que permitem que você utilize diferentes recursos do React em seus componentes. Você pode usar os Hooks integrados ou combiná-los para criar os seus próprios. Eles são uma parte fundamental do desenvolvimento React moderno.

useState

O useState é usado para adicionar estado a componentes funcionais. O estado permite que um componente "lembre" informações, como entrada do usuário, retornando um par de valores: o estado atual e uma função para atualizá-lo.

Exemplo:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

useEffect

O useEffecté usado para realizar efeitos colaterais em componentes funcionais, permitindo que um componente se conecte e sincronize com sistemas externos. Isso inclui lidar com rede, DOM do navegador, animações, widgets escritos usando uma biblioteca de IU diferente e outros códigos não-React.

Exemplo:

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

useContext

O useContext é usado para acessar o contexto do React em componentes funcionais, tornando mais fácil o compartilhamento de dados em toda a árvore de componentes, ou seja, o contexto permite que um componente receba informações de pais distantes sem passá-las como props. Aqui está um exemplo simples:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return <p>Tema atual: {theme}</p>;
}

useReducer

O useReducer é usado para gerenciar estados complexos com lógica de redução. É útil quando o estado depende do estado anterior ou quando há várias ações possíveis que afetam o estado. Aqui está um exemplo de um contador usando useReducer:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Contagem: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Incrementar</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrementar</button>
    </div>
  );
}

useMemo e useCallback

O useMemo é usado para memorizar cálculos caros e evitar que sejam refeitos em cada renderização. É útil para otimizar o desempenho. O useCallback é semelhante ao useMemo, mas é usado para memorizar funções, especialmente em propriedades de componente que podem acionar renders desnecessários.

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

function ExpensiveCalculation({ number }) {
  // useMemo para memorizar o resultado de um cálculo caro
  const result = useMemo(() => {
    console.log('Calculando...');
    return number * 2;
  }, [number]);

  // useCallback para memorizar uma função
  const handleClick = useCallback(() => {
    console.log('Clique tratado');
  }, []);

  return (
    <div>
      <p>Resultado: {result}</p>
      <button onClick={handleClick}>Clique</button>
    </div>
  );
}

useRef

Refs permitem que um componente mantenha informações que não são usadas para renderização, como um nó DOM ou um ID de tempo limite. Ao contrário do estado, atualizar uma ref não faz com que seu componente seja re-renderizado. Refs são uma "saída de emergência" do paradigma do React. Eles são úteis quando você precisa trabalhar com sistemas não-React, como as APIs nativas do navegador.

import React, { useRef } from 'react';

function MeuComponente() {
  // Crie uma referência usando useRef
  const inputRef = useRef(null);

  // Função para focar no input quando um botão for clicado
  const focusInput = () => {
    // Acesse o elemento de input usando a propriedade "current" da ref
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focar no Input</button>
    </div>
  );
}

export default MeuComponente;