O Conceito de Hooks e como o utilizar.

A alguns anos atrás o React não tinha uma forma de armazenar e reutilizar componentes de execução de lógica , trazendo maior dificuldade e trabalho para os desenvolvedores que tinham que usar meios alternativos para construir seus códigos.
Pensando nisso e como o resolver, foi se criado após algumas atualizações componentes específicos para resolver esses de problemas. Com isso se foi criado os Hooks que são componentes específicos do React que são utilizados para gerenciar o estado da aplicação.

Eles são responsáveis pela lógica do código e permitem reutilizar a lógica em vários pontos dele, sem a necessidade de criar novos componentes. Hooks armazenam e executam a lógica de forma eficaz. Com isso, ele fez com que os códigos ficasem mais fáceis de serem feitos e compreendidos.

Existem dois tipos principais de hooks: state hooks e effect hooks. O state hook permite que você gerencie o estado em um componente de função, enquanto o effect hook permite que você faça o carregamento de dados de uma API ou ouvir eventos de mouse.

import { useState } from 'react';

function Example() {
  const [click, setClick] = useState(0);

  return (
    <div>
      <p>You clicked {click} times</p>
      <button onClick={() => setClick(clik + 1)}>
        Click me
      </button>
    </div>
  );
}

Nesse caso utilizando State hook useState para gerir o estado do contador. Incicialmente a contagem inicia com 0, porém com um novo clique, será somado + 1.

import { useEffect } from 'react';

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

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

  return (
    <div>
      {data ? (
        <p>Data loaded</p>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

No exemplo acima, estamos usando o Effect hook useEffect para carregar dados de uma API quando o componente é montado. Ele funcionará apenas uma vez, devido ao array vazio ao final para retorno nulo.

Mas os Hooks não podem ser usados a bel prazer livremente carregando APIs e controlando estados, existem algumas ressalvas para o uso deste componene, como:

• Os Hooks só podem ser chamados dentro dos componentes da função React.

• Hooks só podem ser chamados no nível superior de um componente.

• Hooks não podem ser condicionais

Além disso eles não funcionam dentro de Loops ou classes. A fim de que sua ordem de chamada venha sempre que um componente for renderizado.

Com isso concluímos que os Hooks são uma alternativa mais fácil e prática de gerenciar o estado da aplicação.