Hooks

Os React Hooks são funções especiais introduzidas no React 16.8 que permitem utilizar o estado e outras características do React em componentes funcionais. Antes dos Hooks, apenas os componentes de classe podiam gerir o estado e utilizar métodos de ciclo de vida.

Os hooks revolucionaram a forma como os programadores criam aplicações React, permitindo a utilização de lógica com estado e efeitos colaterais em componentes funcionais, promovendo um código mais limpo e reutilizável.

Regras para o uso de Hooks

• Use Hooks apenas em componentes funcionais: os hooks devem ser chamados de componentes funcionais do React ou de hooks personalizados, e não de funções JavaScript normais.

• Use Hooks apenas no bloco de código de topo da função do componente funcional: Não chame Hooks dentro de ciclos, condições ou funções aninhadas. Utilize sempre Hooks no nível superior da sua função React para garantir que são chamados na mesma ordem cada vez que um componente é renderizado.

Principais hooks

useState

O hook useState serve para adicionar um estado aos componentes funcionais.

Sintaxe:

const [state, setState] = useState(initialState);

state é a variável que guarda o estado.

setState é um setter, ou seja, um método através do qual atualizamos o estado.

initialState é o valor inicial do estado (guardado na variável state).

Exemplo:

import React, { useState } from 'react';

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

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

Podemos usar mais do que um hook useState num componente funcional:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [nome, setNome] = useState("");
  const [idade, setIdade] = useState(0);

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

useState e arrays

O estado de um componente pode conter um array. No exemplo abaixo temos um exemplo disso:

import React, { useState } from 'react';

let nextId = 0;
function ListaPessoas() {
  const [nome, setNome] = useState('');
  const [pessoas, setPessoas] = useState([]); //estado inicial: um array vazio
 
    const addPessoa = () => {
        setPessoas([
            ...pessoas, //valores antigos do array
            { id: nextId++, nome: nome } // adiciona nova pessoa no final do array
        ]);
    };

  return (
    <div>
      <input
        value={nome}
        onChange={e => setNome(e.target.value)}
      />
      <button onClick={addPessoa}>
                Add pessoa
            </button>
    </div>
  );
}

useState e objetos

O estado de um componente pode conter um objeto. No exemplo abaixo temos um exemplo disso:

import React, { useState } from 'react';

function Ponto() {
  const [posicao, setPosicao] = useState({x: 0, y: 0});
 
    const newPosition = () => {
        setPosicao({x: 109, y: 307});
    };

  return (
    <div>
      <button onClick={newPosition}>
                Nova posição
            </button>
    </div>
  );
}

useEffect

O hook useEffect executa efeitos colaterais em componentes funcionais, como obtenção de dados externos,ou alteração manual do DOM, por exemplo.

Sintaxe:

useEffect(() => {
  // Side effect code here

  return () => {
    // Cleanup code here (optional)
  };
}, [dependencies]);

Exemplo:

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

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

  useEffect(() => {
    fetch('https://api.dados.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error('Erro na obtenção de dados:', error));
  }, []); // Dependencia vazia significa que o código executa apés renderização inicial

  if (!data) {
    return <p>A obter dados...</p>;
  }

  return (
    <div>
      <h1>Fetched Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}