# React Custom Hooks: Reutiliza tu lógica Los **custom hooks** te permiten extraer lógica de componentes en funciones reutilizables, haciendo tu código más limpio y mantenible. ## Tu primer custom hook: useFetch ```javascript import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { setLoading(true); const response = await fetch(url); const json = await response.json(); setData(json); } catch (err) { setError(err); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } // Uso function UserProfile({ userId }) { const { data, loading, error } = useFetch(`/api/users/${userId}`); if (loading) return

Cargando...

; if (error) return

Error: {error.message}

; return

{data.name}

; } ``` ## useLocalStorage: Persistencia simple ```javascript import { useState, useEffect } from 'react'; function useLocalStorage(key, initialValue) { const [value, setValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.error(error); return initialValue; } }); useEffect(() => { try { window.localStorage.setItem(key, JSON.stringify(value)); } catch (error) { console.error(error); } }, [key, value]); return [value, setValue]; } // Uso function Settings() { const [theme, setTheme] = useLocalStorage('theme', 'light'); return ( ); } ``` ## useDebounce: Optimiza búsquedas ```javascript import { useState, useEffect } from 'react'; function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debouncedValue; } // Uso function SearchBar() { const [searchTerm, setSearchTerm] = useState(''); const debouncedSearchTerm = useDebounce(searchTerm, 500); useEffect(() => { if (debouncedSearchTerm) { // Hacer búsqueda solo después de 500ms de inactividad console.log('Buscando:', debouncedSearchTerm); } }, [debouncedSearchTerm]); return ( setSearchTerm(e.target.value)} placeholder="Buscar..." /> ); } ``` ## useWindowSize: Responsive hooks ```javascript import { useState, useEffect } from 'react'; function useWindowSize() { const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); useEffect(() => { function handleResize() { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); } window.addEventListener('resize', handleResize); handleResize(); return () => window.removeEventListener('resize', handleResize); }, []); return windowSize; } // Uso function ResponsiveComponent() { const { width } = useWindowSize(); return (

{width < 768 ? ( ) : ( )}

); } ``` ## useToggle: Booleanos simplificados ```javascript import { useState } from 'react'; function useToggle(initialValue = false) { const [value, setValue] = useState(initialValue); const toggle = () => setValue(prev => !prev); const setTrue = () => setValue(true); const setFalse = () => setValue(false); return [value, { toggle, setTrue, setFalse }]; } // Uso function Modal() { const [isOpen, { toggle, setFalse }] = useToggle(); return ( <> {isOpen && (

Contenido del modal

)} ); } ``` ## usePrevious: Acceder al valor anterior ```javascript import { useRef, useEffect } from 'react'; function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current; } // Uso function Counter() { const [count, setCount] = useState(0); const prevCount = usePrevious(count); return (

Ahora: {count}

Antes: {prevCount}

); } ``` ## useForm: Manejo de formularios ```javascript import { useState } from 'react'; function useForm(initialValues) { const [values, setValues] = useState(initialValues); const handleChange = (e) => { const { name, value } = e.target; setValues(prev => ({ ...prev, [name]: value })); }; const reset = () => setValues(initialValues); return { values, handleChange, reset }; } // Uso function LoginForm() { const { values, handleChange, reset } = useForm({ email: '', password: '' }); const handleSubmit = (e) => { e.preventDefault(); console.log(values); reset(); }; return ( ); } ``` ## Reglas de los Custom Hooks 1. **Siempre comienza con "use"**: `useNombreDescriptivo` 2. **Sigue las reglas de hooks**: Solo llamar en el nivel superior 3. **Mantén la independencia**: No dependas de contexto externo innecesario 4. **Documenta bien**: Especialmente los parámetros y valores de retorno ## Conclusión Los custom hooks son una herramienta fundamental para crear aplicaciones React mantenibles. Te permiten compartir lógica compleja de manera simple y declarativa.

Javascript

No se encontraron artículos para esta categoría

Explorar otras categorías