👉 ¿Hablamos de Frontend? Mira mis clases personalizadas en Perú 🧑‍💻
¡Link copiado!

Revisando una PR me topé con useRef en useBoolean ¿es necesario?

Buenas prácticas | | 2 minutos

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!

Si te ha gustado este artículo, ¡compártelo con tus amigos y seguidores! Tu apoyo me motiva a llegar a más personas y a seguir creando contenido increíble para ti.