Revisando una PR me topé con useRef en useBoolean ¿es necesario?
Vamos a resolver una duda bastante común que aparece cuando creas custom hooks en React:
“¿Debería usar useRef para guardar mis funciones?”
La respuesta corta: Depende.
👀 Un caso típico: useBoolean
Imagina que quieres crear un hook simple para manejar estados booleanos (encender, apagar, alternar). Algo como esto
const [active, setActive] = useState(false)
const on = () => setActive(true)
const off = () => setActive(false)
const toggle = () => setActive((s) => !s)
Para encapsularlo en un hook reutilizable, algunos desarrolladores usan useRef para evitar recrear las funciones en cada render:
const actions = useRef({
on: () => setActive(true),
off: () => setActive(false),
toggle: () => setActive((s) => !s),
set: setActive
})
return { active, ...actions.current }
Y aunque este código funciona perfectamente, es posible que no lo necesites.
🤔 ¿Por qué?
useRef previene que el objeto se regenere en cada render, es cierto. Pero en este caso, las funciones on, off y toggle no dependen de ninguna variable que cambie. Solo usan setActive, que React garantiza que siempre es el mismo.
Así que podrías simplificar todo y tener un hook igual de funcional, más limpio y más fácil de leer:
const useBoolean = (initial = false) => {
const [active, setActive] = useState(initial)
const on = () => setActive(true)
const off = () => setActive(false)
const toggle = () => setActive((s) => !s)
return { active, on, off, toggle, set: setActive }
}
🧠 Entonces, ¿cuándo sí usar useRef?
Guarda esta regla en tu bolsillo de frontend: Usa useRef cuando necesites persistir un valor entre renders sin provocar re-renderizados.
Por ejemplo:
-
Cuando almacenas una referencia a un DOM element.
-
Cuando necesitas guardar una función o valor que no quieres que cambie y no depende del estado.
-
Cuando necesitas evitar recrear el contenido de la referencia.
✅ Conclusión
La clave no es usar useRef por costumbre, sino cuando realmente es necesario. En hooks simples como useBoolean, escribir funciones directamente es más limpio y suficiente.
👉 Menos código, más claridad.
¡Gracias por leer!