Aula 4

O que são Hooks?

Hooks são funções especiais que permitem que você use recursos do React, como estado e ciclo de vida, em componentes funcionais. Eles foram introduzidos no React 16.8 e eliminaram a necessidade de usar componentes de classe para gerenciar estado ou ciclos de vida.

Por que usar Hooks?

• Permitem usar estado e outras funcionalidades do React em componentes funcionais.
• Facilitam o compartilhamento de lógica entre componentes.
• Reduzem a complexidade dos componentes ao evitar o uso de classes.

Principais Hooks

• useState: Gerencia estado local em componentes funcionais.
• useEffect: Manipula efeitos colaterais, como requisições de dados ou manipulação do DOM.
• useContext: Acessa valores do contexto de forma mais simples.
• useReducer: Gerencia estados complexos usando um padrão semelhante ao Redux.
• useRef: Permite criar referências mutáveis que sobrevivem entre renderizações.

Exemplo: Contador com useState

import React, { useState } from 'react';

const Contador = () => {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <h1>Contador: {contador}</h1>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
      <button onClick={() => setContador(contador - 1)}>Decrementar</button>
    </div>
  );
};

export default Contador;

        

Exemplo: Requisição com useEffect

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

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

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

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return  <h1>Isso está se repetindo {count} vezes!</h1>;
}

export default Timer;