Aprenda a Criar um Hook para Monitorar o Tamanho da Tela em React

Criando um Hook Personalizado para Monitorar o Tamanho da Tela

Ao desenvolver aplicações em React, é comum precisamos responder a mudanças no tamanho da tela. Para isso, podemos criar um hook personalizado que facilita o monitoramento desse evento. Neste tutorial, vamos aprender a criar um hook que nos permitirá capturar e responder a mudanças no tamanho da tela de forma eficiente.

Por que usar Hooks?

Hooks são uma forma de usar o estado e outras funcionalidades do React sem escrever uma classe. Eles tornam o código mais limpo e facilitam a reutilização de lógica entre componentes. Um hook personalizado pode encapsular lógica que você queira compartilhar entre componentes, como monitorar o tamanho da tela.

Implementando o Hook

Vamos começar implementando nosso hook chamado useWindowSize. Ele irá retornar a largura e a altura da janela. Aqui está o código:

import { useState, useEffect } from 'react';

function useWindowSize() {
    const [windowSize, setWindowSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });

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

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowSize;
}

No código acima, criamos um estado windowSize que guarda a largura e altura da janela. O useEffect é utilizado para adicionar um listener ao evento de redimensionamento da janela. Quando a janela é redimensionada, a função handleResize é chamada, atualizando o estado com os novos valores de largura e altura. Também garantimos que o listener seja removido quando o componente é desmontado, evitando vazamentos de memória.

Usando o Hook em um Componente

Agora que temos nosso hook, vamos utilizá-lo em um componente funcional. Aqui está um exemplo de como fazer isso:

import React from 'react';
import useWindowSize from './useWindowSize';

function App() {
    const { width, height } = useWindowSize();

    return (
        <div>
            <h1>Tamanho da Tela</h1>
            <p>Largura: {width}px</p>
            <p>Altura: {height}px</p>
        </div>
    );
}

Neste componente, chamamos useWindowSize, que retorna a largura e a altura da tela. Esses valores são exibidos em parágrafos dentro do componente. Sempre que a tela for redimensionada, o componente será atualizado automaticamente com os novos valores.

Testando o Hook

Para testar nosso hook, basta incluir o componente App em nosso aplicativo React. Ao redimensionar a janela do navegador, você verá que os valores de largura e altura são atualizados em tempo real.

Considerações Finais

Criar hooks personalizados em React não apenas melhora a organização do seu código, mas também torna a reutilização de lógica muito mais fácil. O hook useWindowSize que desenvolvemos é um exemplo prático de como você pode monitorar mudanças no tamanho da tela e reaproveitar essa lógica em diferentes componentes.

Com esse conhecimento, você pode expandir o hook para incluir mais funcionalidades, como definir limites de tamanho ou responder a diferentes eventos de redimensionamento. Explore e veja como hooks podem ser poderosos em suas aplicações React!

A Importância de Hooks Personalizados em React para Responsividade

Compreender como monitorar o tamanho da tela em uma aplicação React é fundamental, especialmente em um mundo onde dispositivos com diferentes resoluções são comuns. Um hook personalizado, como o useWindowSize, pode ser uma excelente solução para manter a responsividade da sua aplicação. Ao aprender a implementar esse hook, você também se familiariza com conceitos importantes sobre estado e efeitos colaterais no React, que são essenciais para qualquer desenvolvedor. Essa habilidade pode ser um diferencial no seu portfólio e nas suas entrevistas, pois demonstra um entendimento profundo do ecossistema React e de como construir interfaces modernas e responsivas.

Algumas aplicações:

• Desenvolver interfaces responsivas que se adaptam a diferentes tamanhos de tela.
• Implementar designs dinâmicos que mudam com a resolução do dispositivo.
• Aprimorar a experiência do usuário em aplicações web.

Dicas para quem está começando

• Experimente criar outros hooks personalizados além do useWindowSize.
• Teste seu hook em diferentes dispositivos e tamanhos de tela.
• Leia sobre o uso de useEffect para entender melhor como gerenciar efeitos colaterais.

Compartilhe este tutorial