Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 12, 2023 06:30 pm GMT

O Conceito de Hooks e como o utilizar.

A alguns anos atrs o React no tinha uma forma de armazenar e reutilizar componentes de execuo de lgica , trazendo maior dificuldade e trabalho para os desenvolvedores que tinham que usar meios alternativos para construir seus cdigos.
Pensando nisso e como o resolver, foi se criado aps algumas atualizaes componentes especficos para resolver esses de problemas. Com isso se foi criado os Hooks que so componentes especficos do React que so utilizados para gerenciar o estado da aplicao.

Eles so responsveis pela lgica do cdigo e permitem reutilizar a lgica em vrios pontos dele, sem a necessidade de criar novos componentes. Hooks armazenam e executam a lgica de forma eficaz. Com isso, ele fez com que os cdigos ficasem mais fceis 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 funo, enquanto o effect hook permite que voc faa 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, porm 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 no 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 funo React.

  • Hooks s podem ser chamados no nvel superior de um componente.

  • Hooks no podem ser condicionais

Alm disso eles no funcionam dentro de Loops ou classes. A fim de que sua ordem de chamada venha sempre que um componente for renderizado.

Com isso conclumos que os Hooks so uma alternativa mais fcil e prtica de gerenciar o estado da aplicao.


Original Link: https://dev.to/altencirsilvajr/o-conceito-de-hooks-e-como-o-utilizar-3fi7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To