Patrón Provider: Inyección de Dependencias

Patrón Provider: inyección de dependencias

El patrón Provider permite compartir dependencias o estado a través del árbol de componentes sin pasar props manualmente en cada nivel. En React suele implementarse con Context API y hooks de consumo.

Qué puede proveer un Provider

• Cliente de API o repositorio de datos.
• Usuario autenticado y permisos.
• Tema visual, idioma o configuración.
• Funciones compartidas como tracking, feature flags o notificaciones.

const AnalyticsContext = createContext(null);

export function AnalyticsProvider({ client, children }) {
  return (
    <AnalyticsContext.Provider value={client}>
      {children}
    </AnalyticsContext.Provider>
  );
}

export function useAnalytics() {
  const client = useContext(AnalyticsContext);
  if (!client) throw new Error("useAnalytics must be used inside AnalyticsProvider");
  return client;
}

Ventaja arquitectónica

El componente que usa la dependencia no necesita saber cómo se construye. Esto facilita testing, reemplazo de clientes y separación entre infraestructura y UI.

Ejercicio: Provider de notificaciones

Diseñá un NotificationProvider con un hook useNotifications. Debe exponer una función notify y evitar que se use fuera del provider.

Checklist

• Context creado en un archivo separado.
• Hook de consumo con error claro si falta provider.
• Ejemplo de uso en un botón.