O que são Hooks do React e Como Usá-los em Seus Projetos

Introdução:

Desde sua introdução, os Hooks do React têm sido uma verdadeira revolução na forma como desenvolvemos aplicativos front-end. Longe de serem apenas um 'buzzword' tecnológico, eles já provaram seu valor ao tornar o código React mais enxuto, legível e, de muitas maneiras, mais intuitivo.

Neste artigo, vamos mergulhar profundamente no universo dos Hooks: o que são, por que eles são tão úteis e como você pode começar a implementá-los em seus próprios projetos. Se você está cansado de lidar com a complexidade do ciclo de vida e estado em componentes de classe, ou simplesmente quer tornar seu código React mais moderno e eficiente, você está no lugar certo.

---

1. O que são Hooks?

Para aqueles que chegaram até aqui através de nossa postagem no Instagram, vocês já têm uma ideia do que são Hooks. Mas vamos nos aprofundar um pouco mais. Na sua essência, Hooks são funções especiais do React que permitem a você "ligar-se" a recursos do React sem precisar criar uma classe. E por que isso é tão revolucionário? Para responder a essa pergunta, é preciso voltar no tempo e olhar para como o React costumava ser.

Antes dos Hooks, os componentes funcionais no React eram considerados "burros" ou "stateless", porque não tinham acesso a recursos como estado ou métodos do ciclo de vida (como componentDidMount e componentShouldUpdate). Os desenvolvedores eram frequentemente forçados a converter componentes funcionais em componentes de classe para acessar esses recursos. Isso não apenas tornava o código mais verboso, mas também criava uma curva de aprendizado mais íngreme para novatos.

Portanto, os Hooks não são apenas uma nova característica, mas sim uma evolução que reflete as necessidades e os desafios dos desenvolvedores React modernos. Eles tornam a escrita de componentes mais intuitiva, e abrem portas para padrões de projeto mais avançados e reutilizáveis.

2. useState: Gerenciando Estado Local

O useState é talvez o Hook mais conhecido e é usado para adicionar estado local a componentes funcionais.

Exemplo de código:

import { useState } from "react";

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

  return (
    <>
      Número Atual: {count}
      <button onClick={() => setCount(count + 1)}>Contar</button>
    </>
  );
}

export default App;

---

3. useEffect: Lide com Efeitos Colaterais

O useEffect é usado para executar efeitos colaterais em componentes, como chamadas de API, atualizações de DOM, etc.

Exemplo de código:

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Roda apenas quando a página carrega");
  }, []);

  useEffect(() => {
    console.log("Roda toda vez que o 'count' mudar");
    console.log(`Valor do count ${count}`);
  }, [count]);

  return (
    <>
      Número Atual: {count}
      <button onClick={() => setCount(count + 1)}>Contar</button>
    </>
  );
}

export default App;

---

4. useContext: Simplifique a Passagem de Dados

O useContext é um Hook muito útil que evita o problema de "prop drilling", permitindo que você passe dados diretamente através da árvore de componentes.

Exemplo de código:

import { createContext, useContext } from "react";

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value={{ text: "Texto X" }}>
      <ComponentX />
    </UserContext.Provider>
  );
}

function ComponentX() {
  const { text } = useContext(UserContext);

  return <p>{text}</p>;
}
export default App;

---

5. Outros Hooks Importantes: useReducer, useCallback e mais

O React oferece uma variedade de outros Hooks que podem ser utilizados conforme a necessidade do seu projeto. Alguns desses incluem useReducer para gerenciar estados complexos e useCallback para otimizar o desempenho.

import { useReducer, useCallback } 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:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const increment = useCallback(() => dispatch({ type: "INCREMENT" }), []);
  const decrement = useCallback(() => dispatch({ type: "DECREMENT" }), []);

  return (
    <div>
      Count: {state.count}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

6. Conclusão

Os Hooks trouxeram uma revolução na forma como escrevemos e gerenciamos nosso código em React. Eles não apenas tornam nosso código mais limpo e fácil de gerir, como também abrem uma gama de possibilidades que antes eram complexas ou trabalhosas de serem implementadas.

Agora que você já sabe como os Hooks podem ajudá-lo, que tal colocá-los em prática?

Nos cursos da Firtday, ensinamos o jeito certo de você utilizar os Hooks e facilitar o desenvolvimento de seu projeto. Acesse o nosso curso Construindo uma Plataforma de Fitness do Zero e entenda na prática como usar os hooks do react em seu projeto!