Javascript
Front End
React.js
hooks
code-reusability
Una de las características más poderosas de la API de hooks de React es la capacidad de crear tus propios hooks personalizados. Los hooks personalizados te permiten extraer lógica de componentes en funciones reutilizables, haciendo tu código más modular, mantenible y testeable.
Los hooks personalizados son funciones de JavaScript que comienzan con el nombre "use" y pueden llamar a otros hooks. Te permiten extraer y reutilizar lógica con estado de los componentes sin cambiar tu jerarquía de componentes.
Características clave de los hooks personalizados:
useFormValidation, useLocalStorage)Los hooks personalizados resuelven varios problemas comunes en el desarrollo con React:
Comencemos con un ejemplo simple. Aquí hay un hook personalizado que gestiona el estado de entrada de un formulario:
1import { useState } from 'react'; 2 3function useInput(initialValue = '') { 4 const [value, setValue] = useState(initialValue); 5 6 const handleChange = (event) => { 7 setValue(event.target.value); 8 }; 9 10 const reset = () => { 11 setValue(initialValue); 12 }; 13 14 return { 15 value, 16 onChange: handleChange, 17 reset 18 }; 19}
Ahora podemos usar este hook en nuestros componentes:
1function FormularioSimple() { 2 const nameInput = useInput(''); 3 const emailInput = useInput(''); 4 5 const handleSubmit = (event) => { 6 event.preventDefault(); 7 console.log('Enviado:', nameInput.value, emailInput.value); 8 9 // Reiniciar el formulario 10 nameInput.reset(); 11 emailInput.reset(); 12 }; 13 14 return ( 15 <form onSubmit={handleSubmit}> 16 <div> 17 <label>Nombre:</label> 18 <input 19 type="text" 20 value={nameInput.value} 21 onChange={nameInput.onChange} 22 /> 23 </div> 24 25 <div> 26 <label>Email:</label> 27 <input 28 type="email" 29 value={emailInput.value} 30 onChange={emailInput.onChange} 31 /> 32 </div> 33 34 <button type="submit">Enviar</button> 35 </form> 36 ); 37}
Observa cómo el hook personalizado:
value, onChange, reset)Obtener datos es una tarea común en aplicaciones React. Aquí hay un hook personalizado que maneja estados de carga, errores y datos:
1import { useState, useEffect } from 'react'; 2 3function useFetch(url) { 4 const [data, setData] = useState(null); 5 const [loading, setLoading] = useState(true); 6 const [error, setError] = useState(null); 7 8 useEffect(() => { 9 // Reiniciar estados cuando cambia la URL 10 setLoading(true); 11 setData(null); 12 setError(null); 13 14 async function fetchData() { 15 try { 16 const response = await fetch(url); 17 18 if (!response.ok) { 19 throw new Error(`¡Error HTTP! Estado: ${response.status}`); 20 } 21 22 const result = await response.json(); 23 setData(result); 24 } catch (err) { 25 setError(err.message); 26 } finally { 27 setLoading(false); 28 } 29 } 30 31 fetchData(); 32 }, [url]); 33 34 return { data, loading, error }; 35}
Usando el hook de obtención de datos:
1function PerfilUsuario({ userId }) { 2 const { data, loading, error } = useFetch(`/api/users/${userId}`); 3 4 if (loading) return <p>Cargando...</p>; 5 if (error) return <p>Error: {error}</p>; 6 7 return ( 8 <div> 9 <h2>{data.name}</h2> 10 <p>Email: {data.email}</p> 11 <p>Rol: {data.role}</p> 12 </div> 13 ); 14}
Gestionar datos en el almacenamiento local es otro caso de uso común:
1import { useState, useEffect } from 'react'; 2 3function useLocalStorage(key, initialValue) { 4 // Estado para almacenar nuestro valor 5 const [storedValue, setStoredValue] = useState(() => { 6 try { 7 // Obtener del almacenamiento local por clave 8 const item = window.localStorage.getItem(key); 9 // Analizar el JSON almacenado o devolver initialValue 10 return item ? JSON.parse(item) : initialValue; 11 } catch (error) { 12 // Si hay error, devolver initialValue 13 console.error(error); 14 return initialValue; 15 } 16 }); 17 18 // Devolver una versión envuelta de la función setter de useState que 19 // persiste el nuevo valor en localStorage 20 const setValue = (value) => { 21 try { 22 // Permitir que value sea una función para que tengamos la misma API que useState 23 const valueToStore = 24 value instanceof Function ? value(storedValue) : value; 25 26 // Guardar estado 27 setStoredValue(valueToStore); 28 29 // Guardar en almacenamiento local 30 window.localStorage.setItem(key, JSON.stringify(valueToStore)); 31 } catch (error) { 32 console.error(error); 33 } 34 }; 35 36 // Sincronizar con otras pestañas/ventanas del navegador 37 useEffect(() => { 38 function handleStorageChange(event) { 39 if (event.key === key) { 40 setStoredValue(JSON.parse(event.newValue || 'null')); 41 } 42 } 43 44 // Escuchar cambios en otras ventanas 45 window.addEventListener('storage', handleStorageChange); 46 47 return () => { 48 window.removeEventListener('storage', handleStorageChange); 49 }; 50 }, [key]); 51 52 return [storedValue, setValue]; 53}
Usando el hook de almacenamiento local:
1function AlternadorModoOscuro() { 2 const [darkMode, setDarkMode] = useLocalStorage('darkMode', false); 3 4 useEffect(() => { 5 document.body.classList.toggle('dark-mode', darkMode); 6 }, [darkMode]); 7 8 return ( 9 <button onClick={() => setDarkMode(!darkMode)}> 10 Alternar Modo {darkMode ? 'Claro' : 'Oscuro'} 11 </button> 12 ); 13}
La validación de formularios puede volverse compleja. Aquí hay un hook para manejarla:
1import { useState, useEffect } from 'react'; 2 3function useFormValidation(initialValues, validate) { 4 const [values, setValues] = useState(initialValues); 5 const [errors, setErrors] = useState({}); 6 const [touched, setTouched] = useState({}); 7 const [isSubmitting, setIsSubmitting] = useState(false); 8 9 // Validar cuando los valores o campos tocados cambian 10 useEffect(() => { 11 if (Object.keys(touched).length > 0) { 12 const validationErrors = validate(values); 13 setErrors(validationErrors); 14 } 15 }, [values, touched, validate]); 16 17 // Comprobar si el formulario es válido cuando los errores cambian 18 useEffect(() => { 19 if (isSubmitting && Object.keys(errors).length === 0) { 20 // El formulario es válido y está siendo enviado 21 onSubmitCallback(); 22 } 23 24 setIsSubmitting(false); 25 }, [errors, isSubmitting]); 26 27 const handleChange = (event) => { 28 const { name, value } = event.target; 29 30 setValues({ 31 ...values, 32 [name]: value 33 }); 34 }; 35 36 const handleBlur = (event) => { 37 const { name } = event.target; 38 39 setTouched({ 40 ...touched, 41 [name]: true 42 }); 43 }; 44 45 const handleSubmit = (onSubmit) => { 46 return (event) => { 47 event.preventDefault(); 48 49 // Marcar todos los campos como tocados 50 const allTouched = Object.keys(values).reduce((acc, field) => { 51 acc[field] = true; 52 return acc; 53 }, {}); 54 55 setTouched(allTouched); 56 setIsSubmitting(true); 57 onSubmitCallback = onSubmit; 58 }; 59 }; 60 61 const reset = () => { 62 setValues(initialValues); 63 setErrors({}); 64 setTouched({}); 65 setIsSubmitting(false); 66 }; 67 68 // Para acceso al callback en closure 69 let onSubmitCallback = () => {}; 70 71 return { 72 values, 73 errors, 74 touched, 75 handleChange, 76 handleBlur, 77 handleSubmit, 78 reset, 79 isSubmitting 80 }; 81}
Usando el hook de validación de formularios:
1function FormularioRegistro() { 2 const validate = (values) => { 3 const errors = {}; 4 5 if (!values.email) { 6 errors.email = 'El email es requerido'; 7 } else if (!/\S+@\S+\.\S+/.test(values.email)) { 8 errors.email = 'El email es inválido'; 9 } 10 11 if (!values.password) { 12 errors.password = 'La contraseña es requerida'; 13 } else if (values.password.length < 8) { 14 errors.password = 'La contraseña debe tener al menos 8 caracteres'; 15 } 16 17 return errors; 18 }; 19 20 const { 21 values, 22 errors, 23 touched, 24 handleChange, 25 handleBlur, 26 handleSubmit, 27 isSubmitting 28 } = useFormValidation( 29 { email: '', password: '' }, 30 validate 31 ); 32 33 const onSubmit = () => { 34 console.log('Formulario enviado con:', values); 35 // La llamada a la API iría aquí 36 }; 37 38 return ( 39 <form onSubmit={handleSubmit(onSubmit)}> 40 <div> 41 <label>Email:</label> 42 <input 43 type="email" 44 name="email" 45 value={values.email} 46 onChange={handleChange} 47 onBlur={handleBlur} 48 /> 49 {touched.email && errors.email && ( 50 <div className="error">{errors.email}</div> 51 )} 52 </div> 53 54 <div> 55 <label>Contraseña:</label> 56 <input 57 type="password" 58 name="password" 59 value={values.password} 60 onChange={handleChange} 61 onBlur={handleBlur} 62 /> 63 {touched.password && errors.password && ( 64 <div className="error">{errors.password}</div> 65 )} 66 </div> 67 68 <button type="submit" disabled={isSubmitting}> 69 Registrarse 70 </button> 71 </form> 72 ); 73}
Uno de los aspectos más poderosos de los hooks personalizados es su componibilidad. Puedes crear hooks complejos combinando otros más simples:
1function usePerfilUsuario(userId) { 2 // Reutilizar el hook de obtención que definimos anteriormente 3 const { data, loading, error } = useFetch(`/api/users/${userId}`); 4 5 // Reutilizar nuestro hook de almacenamiento local para rastrear el último perfil visto 6 const [lastViewedProfile, setLastViewedProfile] = useLocalStorage( 7 'lastViewedProfile', 8 null 9 ); 10 11 // Establecer el último perfil visto cuando los datos se cargan 12 useEffect(() => { 13 if (data && !loading) { 14 setLastViewedProfile(userId); 15 } 16 }, [data, loading, userId, setLastViewedProfile]); 17 18 return { 19 user: data, 20 loading, 21 error, 22 lastViewedProfile 23 }; 24}
Los hooks personalizados pueden ser probados independientemente de los componentes usando herramientas como @testing-library/react-hooks:
1import { renderHook, act } from '@testing-library/react-hooks'; 2import useCounter from './useCounter'; 3 4test('debería incrementar el contador', () => { 5 const { result } = renderHook(() => useCounter(0)); 6 7 act(() => { 8 result.current.increment(); 9 }); 10 11 expect(result.current.count).toBe(1); 12});
Siempre comienza los nombres de hooks personalizados con "use" para seguir la convención de React. Esto asegura:
1// Bueno 2function useWindowSize() { /* ... */ } 3 4// Malo 5function getWindowSize() { /* ... */ }
Cada hook debería tener una única responsabilidad:
1// Bueno: Hooks enfocados 2function useDocumentTitle(title) { /* ... */ } 3function useWindowWidth() { /* ... */ } 4 5// Malo: Intentando hacer demasiado 6function useDocumentStuff() { /* ... */ } // Demasiado vago y sin enfoque
Los hooks pueden devolver valores de diferentes maneras:
1// Devolución de array (bueno para renombrar en el sitio de uso) 2const [count, setCount] = useCounter(0); 3 4// Devolución de objeto (bueno para múltiples valores) 5const { width, height } = useWindowSize();
Haz que los hooks sean fáciles de usar proporcionando valores predeterminados sensatos:
1function useLocalStorage(key, initialValue = null) { /* ... */ }
No permitas que los hooks hagan fallar la aplicación:
1function useFetch(url) { 2 // ... 3 useEffect(() => { 4 async function fetchData() { 5 try { 6 // Lógica de obtención aquí 7 } catch (error) { 8 // Manejar errores con elegancia 9 setError(error.message); 10 console.error('Error de obtención:', error); 11 } finally { 12 setLoading(false); 13 } 14 } 15 // ... 16 }, [url]); 17 // ... 18}
Exploremos algunos hooks personalizados prácticos que resuelven problemas comunes:
1import { useState, useEffect } from 'react'; 2 3function useMediaQuery(query) { 4 const [matches, setMatches] = useState( 5 () => window.matchMedia(query).matches 6 ); 7 8 useEffect(() => { 9 const mediaQuery = window.matchMedia(query); 10 11 const handleChange = (event) => { 12 setMatches(event.matches); 13 }; 14 15 // Comprobación inicial 16 setMatches(mediaQuery.matches); 17 18 // Navegadores modernos 19 mediaQuery.addEventListener('change', handleChange); 20 21 return () => { 22 mediaQuery.removeEventListener('change', handleChange); 23 }; 24 }, [query]); 25 26 return matches; 27} 28 29// Uso 30function ComponenteResponsivo() { 31 const isMobile = useMediaQuery('(max-width: 768px)'); 32 33 return ( 34 <div> 35 {isMobile ? ( 36 <LayoutMobile /> 37 ) : ( 38 <LayoutDesktop /> 39 )} 40 </div> 41 ); 42}
1import { useEffect } from 'react'; 2 3function useOnClickOutside(ref, handler) { 4 useEffect(() => { 5 const listener = (event) => { 6 // No hacer nada si se hace clic en el elemento de la referencia o elementos descendientes 7 if (!ref.current || ref.current.contains(event.target)) { 8 return; 9 } 10 11 handler(event); 12 }; 13 14 document.addEventListener('mousedown', listener); 15 document.addEventListener('touchstart', listener); 16 17 return () => { 18 document.removeEventListener('mousedown', listener); 19 document.removeEventListener('touchstart', listener); 20 }; 21 }, [ref, handler]); 22} 23 24// Uso 25function MenuDesplegable() { 26 const [isOpen, setIsOpen] = useState(false); 27 const ref = useRef(); 28 29 // Cerrar el menú desplegable cuando se hace clic fuera 30 useOnClickOutside(ref, () => setIsOpen(false)); 31 32 return ( 33 <div ref={ref}> 34 <button onClick={() => setIsOpen(!isOpen)}>Alternar</button> 35 {isOpen && ( 36 <ul className="dropdown-menu"> 37 <li>Opción 1</li> 38 <li>Opción 2</li> 39 </ul> 40 )} 41 </div> 42 ); 43}
1import { useState, useEffect } from 'react'; 2 3function useDebouncedValue(value, delay) { 4 const [debouncedValue, setDebouncedValue] = useState(value); 5 6 useEffect(() => { 7 // Actualizar valor con debounce después del retraso 8 const handler = setTimeout(() => { 9 setDebouncedValue(value); 10 }, delay); 11 12 // Cancelar el timeout si el valor cambia o el componente se desmonta 13 return () => { 14 clearTimeout(handler); 15 }; 16 }, [value, delay]); 17 18 return debouncedValue; 19} 20 21// Uso 22function ComponenteBusqueda() { 23 const [searchTerm, setSearchTerm] = useState(''); 24 const debouncedSearchTerm = useDebouncedValue(searchTerm, 500); 25 const [results, setResults] = useState([]); 26 27 // El efecto solo se ejecutará cuando el valor con debounce cambie 28 useEffect(() => { 29 if (debouncedSearchTerm) { 30 fetchSearchResults(debouncedSearchTerm).then(data => { 31 setResults(data); 32 }); 33 } else { 34 setResults([]); 35 } 36 }, [debouncedSearchTerm]); 37 38 return ( 39 <div> 40 <input 41 value={searchTerm} 42 onChange={e => setSearchTerm(e.target.value)} 43 placeholder="Buscar..." 44 /> 45 {/* Lista de resultados */} 46 </div> 47 ); 48}
Veamos cómo los hooks personalizados pueden estructurar una característica completa en una aplicación React. Aquí hay una aplicación de lista de tareas que utiliza varios hooks personalizados:
1// Paso 1: Crear hooks personalizados enfocados 2 3// Hook para gestionar tareas en localStorage 4function useTodos() { 5 const [todos, setTodos] = useLocalStorage('todos', []); 6 7 const addTodo = (text) => { 8 setTodos([ 9 ...todos, 10 { 11 id: Date.now(), 12 text, 13 completed: false 14 } 15 ]); 16 }; 17 18 const toggleTodo = (id) => { 19 setTodos( 20 todos.map(todo => 21 todo.id === id ? { ...todo, completed: !todo.completed } : todo 22 ) 23 ); 24 }; 25 26 const deleteTodo = (id) => { 27 setTodos(todos.filter(todo => todo.id !== id)); 28 }; 29 30 return { 31 todos, 32 addTodo, 33 toggleTodo, 34 deleteTodo 35 }; 36} 37 38// Hook para manejo de formularios 39function useInputField(initialValue = '') { 40 const [value, setValue] = useState(initialValue); 41 42 const handleChange = (e) => { 43 setValue(e.target.value); 44 }; 45 46 const reset = () => { 47 setValue(initialValue); 48 }; 49 50 return { 51 value, 52 onChange: handleChange, 53 reset 54 }; 55} 56 57// Hook para rastrear estado de filtro 58function useFilteredTodos(todos) { 59 const [filter, setFilter] = useState('all'); 60 61 const filteredTodos = useMemo(() => { 62 switch (filter) { 63 case 'active': 64 return todos.filter(todo => !todo.completed); 65 case 'completed': 66 return todos.filter(todo => todo.completed); 67 default: 68 return todos; 69 } 70 }, [todos, filter]); 71 72 return { 73 filter, 74 setFilter, 75 filteredTodos 76 }; 77} 78 79// Paso 2: Componerlos en un componente 80 81function AppTodo() { 82 const { todos, addTodo, toggleTodo, deleteTodo } = useTodos(); 83 const { value: newTodoText, onChange: setNewTodoText, reset: resetNewTodoText } = useInputField(); 84 const { filter, setFilter, filteredTodos } = useFilteredTodos(todos); 85 86 const handleSubmit = (e) => { 87 e.preventDefault(); 88 if (!newTodoText.trim()) return; 89 90 addTodo(newTodoText); 91 resetNewTodoText(); 92 }; 93 94 return ( 95 <div className="todo-app"> 96 <h1>Lista de Tareas</h1> 97 98 <form onSubmit={handleSubmit}> 99 <input 100 type="text" 101 value={newTodoText} 102 onChange={setNewTodoText} 103 placeholder="Añadir una tarea..." 104 /> 105 <button type="submit">Añadir</button> 106 </form> 107 108 <div className="filters"> 109 <button 110 className={filter === 'all' ? 'active' : ''} 111 onClick={() => setFilter('all')} 112 > 113 Todas 114 </button> 115 <button 116 className={filter === 'active' ? 'active' : ''} 117 onClick={() => setFilter('active')} 118 > 119 Activas 120 </button> 121 <button 122 className={filter === 'completed' ? 'active' : ''} 123 onClick={() => setFilter('completed')} 124 > 125 Completadas 126 </button> 127 </div> 128 129 <ul className="todo-list"> 130 {filteredTodos.map(todo => ( 131 <li key={todo.id} className={todo.completed ? 'completed' : ''}> 132 <input 133 type="checkbox" 134 checked={todo.completed} 135 onChange={() => toggleTodo(todo.id)} 136 /> 137 <span>{todo.text}</span> 138 <button onClick={() => deleteTodo(todo.id)}>Eliminar</button> 139 </li> 140 ))} 141 </ul> 142 143 <div className="todo-count"> 144 <p>{todos.filter(todo => !todo.completed).length} tareas restantes</p> 145 </div> 146 </div> 147 ); 148}
Este ejemplo demuestra:
Cuando un hook no está memorizando correctamente los valores o faltan dependencias:
1// Problema: Crea una nueva función en cada renderizado 2function useProblematico() { 3 const [count, setCount] = useState(0); 4 5 // Este efecto se ejecuta en cada renderizado porque fetch se recrea cada vez 6 useEffect(() => { 7 const fetchData = async () => { 8 // Obtener datos 9 }; 10 11 fetchData(); 12 }, [fetchData]); // ¡La dependencia cambia en cada renderizado! 13 14 return count; 15} 16 17// Solución: Usar useCallback 18function useSolucionado() { 19 const [count, setCount] = useState(0); 20 21 const fetchData = useCallback(async () => { 22 // Obtener datos 23 }, []); // Referencia de función estable 24 25 useEffect(() => { 26 fetchData(); 27 }, [fetchData]); // Ahora la dependencia es estable 28 29 return count; 30}
Cuando un hook captura valores desactualizados:
1// Problema: El temporizador usa un valor desactualizado de count 2function useTemporizadorProblematico() { 3 const [count, setCount] = useState(0); 4 5 useEffect(() => { 6 const timer = setInterval(() => { 7 // Esto siempre ve el valor inicial de count (0) 8 setCount(count + 1); 9 }, 1000); 10 11 return () => clearInterval(timer); 12 }, []); // Deps vacías significa que esta closure captura el count inicial 13 14 return count; 15} 16 17// Solución: Usar actualizaciones funcionales 18function useTemporizadorSolucionado() { 19 const [count, setCount] = useState(0); 20 21 useEffect(() => { 22 const timer = setInterval(() => { 23 // Esto siempre obtiene el último count 24 setCount(prevCount => prevCount + 1); 25 }, 1000); 26 27 return () => clearInterval(timer); 28 }, []); // Deps vacías está bien ahora 29 30 return count; 31}
Los hooks personalizados son una forma poderosa de abstraer y reutilizar lógica en aplicaciones React. Resuelven problemas comunes como la duplicación de código, la separación de preocupaciones y la testeabilidad, mientras mantienen el modelo composicional de React.
Al crear tus propios hooks personalizados, puedes:
A medida que construyas tus aplicaciones React, busca oportunidades para abstraer lógica repetida en hooks personalizados. Comienza con hooks pequeños y enfocados, y compónlos para construir funcionalidad más compleja.
Recuerda que los hooks son solo funciones, pero siguiendo las convenciones de React y las directrices en esta lección, puedes crear abstracciones poderosas que hacen tu código más limpio, más mantenible y más reutilizable.