React Hooks - Cheatsheet
Cheatsheet de alguns Hooks para resolver algumas situações
Hooks são uma maneira excelente de criar e acessar funcionalidades em componentes. Não precisamos nos restringir ao uso dos hooks nativos, o que nos dá a liberdade de criar nossos próprios
useListener
Observar as atividades da janela (window) com um pequeno atraso, a fim de evitar atualizações em excesso.
import { useEffect, useRef } from "react"
const useListener = (type, callback, delay) => {
const savedTimer = useRef(null)
const savedCallback = useRef(callback)
useEffect(() => {
savedCallback.current = callback
})
useEffect(() => {
if (delay >= 0) {
const resizeListener = () => {
if (savedTimer.current) {
clearTimeout(savedTimer.current)
}
savedTimer.current = setTimeout(() => savedCallback.current(), delay)
}
window.addEventListener(type, resizeListener)
return () => window.removeEventListener(type, resizeListener)
}
}, [type, delay])
}
export default useListenerUm exemplo para "ouvir" o scroll do navegador
useListener("scroll", onScroll)useInterval
Hook para executar um função em intervalos definidos
import { useEffect, useRef } from "react"
const useInterval = (callback, delay) => {
const savedCallback = useRef(callback)
useEffect(() => {
savedCallback.current = callback
})
useEffect(() => {
const tick = () => savedCallback.current()
const id = setInterval(tick, delay)
return () => clearInterval(id)
}, [])
}
export default useIntervaluseDebounce
Em algumas situações, ao responder às ações do usuário, é aconselhável introduzir um pequeno atraso antes de efetivar as alterações. Por exemplo, quando estamos capturando a digitação em uma caixa de texto (input), reagir a cada tecla pressionada pode resultar em um excesso de processamento. Para contornar isso, podemos adicionar um atraso na resposta
import { useEffect, useState } from "react"
const useDebounce = <T>(value: T, delay?: number): T => {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
return () => {
clearTimeout(timer)
}
}, [value, delay])
return debouncedValue
}
export default useDebounce
