Punto donde se puede enganchar código adicional (React, WordPress, frameworks).
Un hook es un punto de extensión que permite "enganchar" código personalizado en el ciclo de vida de un framework o librería. En React, los hooks (useState, useEffect, etc.) permiten usar estado y otras características sin escribir clases. En WordPress, los hooks (actions/filters) permiten modificar el comportamiento del core. Los hooks fomentan la composición sobre la herencia y facilitan la reutilización de lógica.
// React Hooks import { useState, useEffect, useMemo, useCallback } from 'react'; function UserProfile({ userId }) { // Estado local const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); // Efecto secundario useEffect(() => { async function fetchUser() { setLoading(true); const data = await getUser(userId); setUser(data); setLoading(false); } fetchUser(); // Cleanup function return () => { // Cancelar peticiones, limpiar suscripciones }; }, [userId]); // Dependencias // Valor memoizado const fullName = useMemo(() => { return `${user?.firstName} ${user?.lastName}`; }, [user]); // Callback memoizado const handleClick = useCallback(() => { console.log('Clicked for user:', userId); }, [userId]); if (loading) return <Spinner />; return <div>{fullName}</div>; } // Custom Hook - Reutilizar lógica function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)); }, [url]); return { data, loading, error }; } // Uso del custom hook const { data: users, loading } = useFetch('/api/users');
