Explicação 💡

Esse código define um hook personalizado chamado useIsMobile, que detecta se o dispositivo é considerado mobile ou não, dependendo da largura da tela. A lógica é baseada no ponto de interrupção de 768 pixels de largura (MOBILE_BREAKPOINT). O hook usa o window.matchMedia para escutar mudanças na largura da tela e retorna um valor booleano indicando se a tela é menor que o ponto de interrupção.

Detalhamento do Código 🧑‍💻

1. Definição do ponto de interrupção (breakpoint) 📐

const MOBILE_BREAKPOINT = 768

O valor 768 é o ponto de interrupção onde consideramos que o dispositivo é mobile. Isso significa que se a largura da tela for menor que esse valor, consideramos o dispositivo como sendo mobile.

2. Definição do Hook useIsMobile 🪝

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState(undefined)

A função useIsMobile é um hook personalizado, utilizando o React.useState para manter o estado da variável isMobile. Inicialmente, o estado é undefined, pois ainda estamos verificando a largura da tela.

3. Uso do useEffect para escutar mudanças na largura da tela 🔄

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

Aqui, usamos o hook useEffect para configurar a verificação do tamanho da tela. O matchMedia cria uma consulta de mídia (mql) que verifica se a largura da tela é menor que 768px. A função onChange será chamada sempre que a largura da tela mudar, atualizando o estado isMobile de acordo com a nova largura. Inicialmente, verificamos a largura da janela e definimos o estado isMobile logo após a primeira renderização.

• mql.addEventListener('change', onChange): Ouve as mudanças na largura da tela e executa a função onChange.
• return () => mql.removeEventListener('change', onChange): Limpa o ouvinte de evento quando o componente for desmontado.

4. Retorno do valor booleano ✅

  return !!isMobile
}

Por fim, retornamos um valor booleano (true ou false) que indica se o dispositivo é mobile ou não. Usamos !! para garantir que o valor seja sempre um booleano, mesmo que isMobile seja undefined na primeira renderização.

Código Completo 👨‍💻

import * as React from 'react'
 
const MOBILE_BREAKPOINT = 768
 
export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState(undefined)
 
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])
 
  return !!isMobile
}