useState e useEffect

Os hooks e são fundamentais para componentes funcionais no React. Eles ajudam a adicionar estado e gerenciar efeitos colaterais, respectivamente.useStateuseEffect

Estado de uso

O permite que você adicione estado a um componente funcional. Ele retorna um par: o valor do estado e uma função para atualizá-lo. Veja como usá-lo:useState

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

No exemplo acima:

• useState(0) inicializa o estado com o valor .count0
• setCount é a função usada para atualizar .count
• Cada vez que o botão é clicado, incrementa o valor de .setCountcount

useEffect

O permite realizar efeitos colaterais em componentes funcionais. Ele é chamado após a renderização. Com ele, você pode, por exemplo, buscar dados, atualizar o DOM ou definir timers.useEffect

Veja um exemplo básico:

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>Segundos: {seconds}</p>
    </div>
  );
}

Neste exemplo:

• useState(0) inicializa o estado com .seconds0
• useEffect configura um intervalo que incrementa a cada segundo.seconds
• O retorno da função de limpeza () é usado para limpar o intervalo quando o componente desmonta.clearInterval

Conclusão

Os hooks e são essenciais para componentes funcionais em React. O adiciona estado e gerencia efeitos colaterais. Com eles, você pode criar componentes dinâmicos e interativos de forma simples e eficaz.useStateuseEffectuseStateuseEffect

Compartilhar

Compartilhar

Siga-me