Avanzadoreact
Patrones de Componentes
Aprende patrones avanzados: render props, compound components, higher-order components (HOC).
Custom Hooks: Reutilizar logica
Los custom hooks extraen logica reutilizable de los componentes. Siempre empiezan con
use y pueden usar otros hooks.jsx
1function useLocalStorage(key, initialValue) {
2 const [value, setValue] = useState(() => {
3 const saved = localStorage.getItem(key);
4 return saved ? JSON.parse(saved) : initialValue;
5 });
6
7 useEffect(() => {
8 localStorage.setItem(key, JSON.stringify(value));
9 }, [key, value]);
10
11 return [value, setValue];
12}
13
14// Uso
15function App() {
16 const [tema, setTema] = useLocalStorage("theme", "light");
17 return <button onClick={() => setTema(t => t === "light" ? "dark" : "light")}>{tema}</button>;
18}Higher-Order Components (HOC)
Un HOC es una funcion que toma un componente y retorna un componente mejorado con funcionalidad adicional.
jsx
1function withAuth(WrappedComponent) {
2 return function AuthenticatedComponent(props) {
3 const { user } = useAuth();
4
5 if (!user) {
6 return <p>Debes iniciar sesion para ver este contenido.</p>;
7 }
8
9 return <WrappedComponent {...props} user={user} />;
10 };
11}
12
13// Uso
14const DashboardProtegido = withAuth(Dashboard);Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output