React useTimeout Hook

Introdução

Neste laboratório, exploraremos como implementar a função setTimeout() de forma declarativa usando o custom hook useTimeout em React. Este hook nos permite configurar um timeout e limpá-lo facilmente, ao mesmo tempo em que lembra a última função de callback. Também veremos um exemplo de como usar o hook useTimeout para criar um temporizador de um segundo que atualiza o estado de um componente a cada segundo.

React useTimeout Hook

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Para implementar setTimeout() de forma declarativa, crie um custom hook que recebe um callback e um delay. Use o hook useRef() para criar uma ref para a função de callback e use o hook useEffect() para lembrar o último callback. Em seguida, use o hook useEffect() para configurar o timeout e limpá-lo.

Aqui está um trecho de código de exemplo que demonstra essa abordagem:

const useTimeout = (callback, delay) => {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  React.useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };
    if (delay !== null) {
      let id = setTimeout(tick, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
};

const => {
  const [seconds, setSeconds] = React.useState(0);

  useTimeout(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return <p>{seconds}</p>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<OneSecondTimer />);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório React useTimeout Hook. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.