Custom Hooks ### ### Introducción ### Los Custom Hooks son funciones de JavaScript cuyos nombres empiezan con 'use' y que pueden llamar a otros Hooks de React. Permiten extraer y reutilizar lógica de estado entre componentes, haciendo tu código más modular y legible. ### Creación de un Custom Hook ### Un Custom Hook es simplemente una función que puede utilizar otros Hooks de React. use es un prefijo obligado para que React pueda identificar el Custom Hook como tal. javascript import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchData() { const response = await fetch(url); const data = await response.json(); setData(data); setLoading(false); } fetchData(); }, [url]); return { data, loading }; } ### Uso del Custom Hook ### Una vez creado el Custom Hook, puedes usarlo fácilmente dentro de cualquier componente funcional. javascript import React from 'react'; import useFetch from './useFetch'; function DataComponent() { const { data, loading } = useFetch('https://api.example.com/data'); if (loading) { return <p>Cargando...</p>; } return ( <div> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); } ### Ventajas de los Custom Hooks ### - Reutilización de lógica: Puedes extraer lógica compartida entre componentes. - Modularidad: Mejora la organización y mantenibilidad del código. - Separación de responsabilidades: Lógica de estado y renderización manejadas de manera separada. ### Ejemplo avanzado ### Considera un Custom Hook que maneja la autenticación del usuario. javascript import { useState, useEffect } from 'react'; function useAuth() { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchUser() { const response = await fetch('/api/user'); const userData = await response.json(); setUser(userData); setLoading(false); } fetchUser(); }, []); const login = async (credentials) => { const response = await fetch('/api/login', { method: 'POST', body: JSON.stringify(credentials) }); const userData = await response.json(); setUser(userData); }; const logout = () => { setUser(null); }; return { user, loading, login, logout }; } ### Uso del Custom Hook avanzado ### Incorporando la lógica de autenticación en un componente. javascript import React from 'react'; import useAuth from './useAuth'; function AuthComponent() { const { user, loading, login, logout } = useAuth(); if (loading) { return <p>Cargando...</p>; } return ( <div> {user ? ( <div> <p>Bienvenido, {user.name}</p> <button onClick={logout}>Cerrar sesión</button> </div> ) : ( <button onClick={() => login({ username: 'admin', password: 'admin' })}>Iniciar sesión</button> )} </div> ); } ### Buenas prácticas ### - Prefijo 'use' en el nombre: Asegúrate de que el nombre del Custom Hook empieza con 'use' para adherirse a las convenciones de React. - Single Responsibility: Intenta que cada Custom Hook maneje una sola responsabilidad, haciendo el código más fácil de testear y mantener. - Documentación: Documenta tus Custom Hooks para que otros desarrolladores puedan entender rápidamente qué hacen y cómo usarlos. ### Conclusión ### Los Custom Hooks son una herramienta poderosa que permite extraer y reutilizar lógica compleja en tus aplicaciones de React. Al encapsular la lógica en Hooks personalizados, puedes mejorar la modularidad y la mantenibilidad de tu código, permitiendo que tus componentes se enfoquen en la tarea de renderizar la UI. [Placeholder para imagen sobre la creación y uso de Custom Hooks: Diagrama que muestra cómo se crea un Custom Hook, cómo usa otros Hooks de React y cómo los componentes pueden usar el Custom Hook, indicando el flujo de datos y la reutilización de lógica.]