Estamos criando componentes React há algum tempo. Uma coisa que você deve ter notado é que nossos componentes React continham apenas dados estáticos. No entanto, você também terá que lidar regularmente com dados dinâmicos ao trabalhar com o React.

Aprendemos sobre props no tutorial anterior e como eles passam dados de componentes pai para um filho. Por outro lado, o estado é usado para gerenciar informações ou dados dentro dos componentes. Ao contrário das props, os dados de estado podem ser alterados ao longo da vida útil do componente.

Atualizando elementos renderizados

Vamos criar um gerador de números aleatórios que nos dê um novo número aleatório acima de um valor mínimo a cada dois segundos. O código do componente ficaria assim:

const rootElem = document.getElementById("root");

function RandomGenerator(props) {
  
  let randomNumber = Math.floor(Math.random()*1000) + props.low;
  
  setInterval(() => {
    randomNumber = Math.floor(Math.random()*1000) + props.low;
  }, 2000);
  
  return (
    

      
Random Number Generator
      
{randomNumber}
    
  );
}

let randomElem = (
  <>
    
  
);

ReactDOM.createRoot(rootElem).render(randomElem);

Nosso RandomGenerator o componente retorna dois elementos de cabeçalho encapsulados dentro de um contêiner div. Estamos usando adereços para especificar o limite inferior para nosso número aleatório. Nós usamos setInterval() para definir um novo valor para randomNumber a cada dois segundos.

Você provavelmente esperará que isso produza um novo número aleatório a ser renderizado na página da Web a cada dois segundos. No entanto, isso não acontece de fato. O elemento que geramos a partir do componente representa apenas como seria em um único ponto específico do tempo em que foi gerado.

Uma solução para o nosso problema seria renderizar novamente o elemento a cada dois segundos usando o código abaixo.

const rootElem = document.getElementById("root");

function RandomGenerator(props) {
  
  let randomNumber = Math.floor(Math.random()*1000) + props.low;
  
  return (
    

      
Random Number Generator
      
{randomNumber}
    
  );
}

let randomElem = (
  <>
    
  
);

function refresh() {
  ReactDOM.createRoot(rootElem).render(randomElem);
}

refresh();

setInterval(refresh, 2000);

Como você pode ver na demonstração, essa técnica funciona e obtemos um novo número aleatório em intervalos regulares.

Usando o estado para atualizar componentes

Um problema com o código que escrevemos acima é que nosso componente não é mais independente. Devemos criar componentes encapsulados que gerenciem seu próprio estado e atualizem o DOM se e quando necessário. Ele também renderiza novamente o componente inteiro quando o número aleatório é gerado quando deve atualizar apenas o cabeçalho do número aleatório.

Nesta seção, atualizaremos nosso componente para usar state para que não precisemos fazer uma chamada de renderização de fora do componente para obter nosso número.

Nós criamos nosso componente como uma função aqui. Nas versões anteriores do React, você teria que converter o componente da função em uma classe para usar o estado. No entanto, agora podemos usar ganchos para obter a mesma funcionalidade.

Hooks são funções especiais que permitem que você use recursos do React como state dentro de seus componentes de função. Existem muitos ganchos no React, mas vamos apenas discutir o useState gancho aqui.

Ligando useState() nos permite preservar algumas variáveis ​​mesmo após a saída da função. Em nosso exemplo, estamos acompanhando o valor da variável randomNumber. O único argumento para o qual passamos useState() é o estado inicial ou valor da nossa variável. Em seguida, ele retorna um par de valores que possuem o estado atual e a função que atualiza o estado.

const rootElem = document.getElementById("root");

function RandomGenerator(props) {
  
  const[randomNumber, setNumber] = React.useState(Math.floor(Math.random()*1000) + props.low);
  
  setTimeout(() => setNumber(Math.floor(Math.random()*1000) + props.low), 2000);
  
  return (
    

      
Random Number Generator
      
{randomNumber}
    
  );
}

let randomElem = (
  <>
    
  
);

ReactDOM.createRoot(rootElem).render(randomElem);

Nós chamamos nosso setNumber() funcionar dentro setTimeout após cada dois segundos para obter um novo número aleatório. Há algumas coisas a serem observadas aqui.

Pode parecer contra-intuitivo que estejamos usando const para nossa variável randomNumber aqui mesmo que esteja mudando de valor. O truque aqui é que a variável não está realmente mudando de valor em uma única chamada de função. Sempre que chamamos setNumber() para atualizar o valor da variável, ele aciona uma chamada para RandomGenerator() para renderizar novamente o componente. A variável randomNumber permanecerá constante durante cada um desses ciclos, por isso usamos const. Observe também que não estamos usando nenhum operador de atribuição dentro setNumber() para definir um novo valor para randomNumber.

Você também pode estar se perguntando por que não usamos setInterval() ao invés de setTimeout(). A razão é que usando setInterval() resultará na criação de um novo intervalo a cada atualização. Usando setTimeout() nos permite fazer uma atualização a cada dois segundos.

Pensamentos finais

Espero que este tutorial tenha ajudado você a entender como podemos usar o estado para gerenciar dados dinâmicos dentro de nossos componentes no React. Para praticar, tente atualizar o exemplo acima para que ele acompanhe a soma de todos os números aleatórios que estamos gerando.