Higher-Order Components (HOC) en React: Una Guía Práctica

Los Higher-Order Components (HOC) son una técnica avanzada en React que nos permite reutilizar la lógica de componentes. En este artículo, exploraremos qué son los HOC, por qué son útiles y cómo implementarlos con ejemplos prácticos.

¿Qué es un Higher-Order Component?

Un Higher-Order Component es una función que toma un componente y devuelve un nuevo componente con funcionalidades adicionales. Es similar al concepto de “higher-order functions” en JavaScript, pero aplicado a componentes de React.

Estructura Básica

const withHOC = (WrappedComponent) => {
	return function WithHOCComponent(props) {
		// Lógica adicional aquí
		return <WrappedComponent {...props} />;
	};
};

Ejemplo 1: HOC para Autenticación

Uno de los casos de uso más comunes es proteger rutas que requieren autenticación:

const withAuth = (WrappedComponent) => {
	return function WithAuthComponent(props) {
		const [isAuthenticated, setIsAuthenticated] = useState(false);

		useEffect(() => {
			// Simular verificación de autenticación
			const checkAuth = async () => {
				const token = localStorage.getItem('token');
				setIsAuthenticated(!!token);
			};
			checkAuth();
		}, []);

		if (!isAuthenticated) {
			return <Navigate to='/login' />;
		}

		return <WrappedComponent {...props} />;
	};
};

// Uso:
const ProtectedPage = withAuth(MyPage);

Ejemplo 2: HOC para Loading State

Otro caso común es manejar estados de carga:

const withLoading = (WrappedComponent) => {
	return function WithLoadingComponent(props) {
		const [isLoading, setIsLoading] = useState(true);

		useEffect(() => {
			// Simular carga de datos
			const fetchData = async () => {
				try {
					await props.fetchData();
				} finally {
					setIsLoading(false);
				}
			};
			fetchData();
		}, []);

		if (isLoading) {
			return <div>Cargando...</div>;
		}

		return <WrappedComponent {...props} />;
	};
};

// Uso:
const DataComponent = withLoading(MyDataComponent);

Ejemplo 3: HOC para Logging

Un HOC útil para debugging:

const withLogging = (WrappedComponent) => {
	return function WithLoggingComponent(props) {
		useEffect(() => {
			console.log(`Componente ${WrappedComponent.name} montado`);
			return () => {
				console.log(`Componente ${WrappedComponent.name} desmontado`);
			};
		}, []);

		return <WrappedComponent {...props} />;
	};
};

// Uso:
const LoggedComponent = withLogging(MyComponent);

Mejores Prácticas

1. Nombra tus HOC con el prefijo “with”:

   const withFeature = (Component) => { ... }

2. Pasa las props no utilizadas al componente envuelto:

   return <WrappedComponent {...props} />;

3. Mantén la consistencia en el nombre del componente:

   WithFeatureComponent.displayName = `WithFeature(${getDisplayName(WrappedComponent)})`;

Consideraciones

• Los HOC pueden hacer que el código sea más difícil de seguir si se usan en exceso
• Pueden causar problemas con las referencias de componentes
• Es importante mantener la transparencia en las props que se pasan

Conclusión

Los Higher-Order Components son una herramienta poderosa para reutilizar lógica en React. Son especialmente útiles para:

• Manejar autenticación
• Gestionar estados de carga
• Implementar logging
• Añadir funcionalidades transversales