React useWindowSize Hook

Introdução

Neste laboratório, aprenderemos como usar o hook useWindowSize em React para rastrear as dimensões da janela do navegador. Este hook nos permite criar designs responsivos e ajustar o layout de nossos componentes com base no tamanho da tela do usuário. Ao final deste laboratório, você terá uma melhor compreensão de como usar hooks em React e como criar aplicações mais amigáveis.

React useWindowSize 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 rastrear as dimensões da janela do navegador, as seguintes etapas podem ser tomadas:

1. Use o hook useState() para inicializar uma variável de estado windowSize que conterá as dimensões da janela. Inicialize com ambos os valores definidos como undefined para evitar incompatibilidade entre as renderizações do servidor e do cliente.

const [windowSize, setWindowSize] = React.useState({
  width: undefined,
  height: undefined
});

2. Crie uma função handleResize() que usa Window.innerWidth e Window.innerHeight para atualizar a variável de estado. Esta função será chamada sempre que o evento 'resize' for acionado.

const handleResize = () =>
  setWindowSize({ width: window.innerWidth, height: window.innerHeight });

3. Use o hook useEffect() para definir um listener apropriado para o evento 'resize' no momento da montagem e limpá-lo no momento da desmontagem.

React.useEffect(() => {
  window.addEventListener("resize", handleResize);

  handleResize();

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

Juntando tudo, o custom hook useWindowSize() pode ser definido da seguinte forma:

const useWindowSize = () => {
  const [windowSize, setWindowSize] = React.useState({
    width: undefined,
    height: undefined
  });

  const handleResize = () =>
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });

  React.useEffect(() => {
    window.addEventListener("resize", handleResize);

    handleResize();

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return windowSize;
};

Para usar o hook useWindowSize(), basta chamá-lo em um componente e desestruturar os valores width e height do objeto retornado.

const MyApp = () => {
  const { width, height } = useWindowSize();

  return (
    <p>
      Window size: ({width} x {height})
    </p>
  );
};

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

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 useWindowSize Hook. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.