UseState e UseEffect com React

Ufa, já se passaram alguns meses desde a nossa última postagem no blog, quando fizemos uma chamada de API com fetch () e Javascript! Desta vez, estamos construindo um projeto dentro do React Framework ou tecnologia. É tudo muito empolgante e hoje escreverei sobre dois importantes ganchos do React que você usará, useState e useEffect!

Então, o que são useState e useEffect? Bem, são funções especiais dentro da estrutura do React que permitem que você acesse ou se conecte aos recursos do React. State e Effect são os ganchos, e useState () e useEffect () são as funções que usam esses ganchos que permitem os recursos React. React State e React Effect são usados ​​apenas na estrutura React, mas são ferramentas muito fortes e você, sem dúvida, as usará em sua jornada de programação!

Vamos começar com React State, o que é State e por que ou como eu começaria a usá-lo? Bem, Estado é um tipo de dado dinâmico, ele muda com o tempo ou quando o usuário faz algo. Digamos que você queira definir uma “contagem” para um contador, quando o contador mudar, o estado de “contagem” mudará com ele. Ao contrário dos adereços, quando são passados ​​de um componente pai, como App.js, o estado mudará, enquanto os adereços não. Abaixo, estamos importando o gancho useState para o componente e, em seguida, estamos chamando a função useState dentro da função Example (). A sintaxe para definir o estado é a seguinte:

const [estado, setState] = useState ()

(useState retorna um par de valores, o estado atual e uma função para atualizá-lo.)

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>    Click me
  </button>

Para simplificar, falaremos apenas sobre useEffect em termos de usá-lo para obter dados ou para extrair dados de uma API pública usando fetch ()! O gancho Effect permite que você execute efeitos colaterais em seus componentes ou, essencialmente, execute algum código adicional após o React ter atualizado o DOM. O principal efeito do seu componente é atualizar o DOM ou alterar um elemento, enquanto o efeito colateral pode ser algo como fazer uma solicitação de rede ou acessar dados de um banco de dados. É aqui que entra nossa chamada de API ou busca de dados. Podemos usar o gancho Effect em nosso componente de função e chamá-lo para extrair os dados de que precisamos. Como uma observação lateral, useEffect é chamado sempre que o componente é renderizado. Então, renderíamos nosso DOM e, em seguida, nosso useEffect seria chamado.

useEffect(() => { 
         fetch(API) 
           .then((r) => r.json()) 
              .then((data) => {
                    setState(data) }); 
}, []);

Há muito mais para usar o Effect, como efeitos com e sem limpeza, mas não vamos falar sobre eles hoje. E tenho certeza de que há muito mais para usar o State, mas estou contente em cobrir apenas o básico hoje. Espero que tenha sido útil e obrigado pela leitura, boa sorte em continuar sua jornada de programação e fique bem!