Gestión de Estado

Este documento explica la estrategia de gestión de estado utilizada en AdSpaces, combinando React Query para el estado del servidor y Context API para el estado local.

React Query

Estado de servidor y caché

Utilizamos React Query (@tanstack/react-query) para manejar el estado que proviene del servidor, incluyendo:

Fetching de datos con caché automática
Manejo de estados de carga y error
Revalidación automática de datos
Sincronización entre pestañas
Paginación y scroll infinito
Mutaciones optimistas y pesimistas


// Ejemplo de uso de React Query
const { data, isLoading, error } = useQuery({
  queryKey: ['spaces'],
  queryFn: fetchSpaces
});

// Mutación para actualizar datos
const mutation = useMutation({
  mutationFn: updateSpace,
  onSuccess: () => {
    queryClient.invalidateQueries(['spaces'])
  }
});

Context API

Estado local y de UI

Usamos Context API de React para manejar:

Estado de autenticación del usuario
Preferencias de tema (claro/oscuro)
Estados de UI compartidos entre componentes
Configuraciones globales de la aplicación


// Ejemplo de Context
export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  
  // Lógica de autenticación...
  
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

Estrategia de gestión de estado

Nuestra estrategia sigue estos principios:

Estado del servidor: React Query gestiona todos los datos que vienen del backend, incluyendo su caché y sincronización.
Estado global: Para estado que debe ser accesible en toda la aplicación, usamos Context API.
Estado local: Para componentes individuales, usamos useState y useReducer según la complejidad.
Estado de formularios: Utilizamos react-hook-form para manejar el estado de los formularios y su validación.
Estado de URL: Para estado que debe reflejarse en la URL y ser compartible, usamos parámetros de URL y react-router.

Flujo de datos típico

1. El usuario interactúa con la UI → 2. Se dispara una mutación de React Query → 3. Los datos se actualizan en el servidor → 4. React Query invalida la caché → 5. Se vuelven a obtener los datos actualizados → 6. La UI se actualiza

Optimizaciones

Uso de React.memo para prevenir re-renderizados innecesarios
Actualización optimista de la UI antes de confirmación del servidor
Uso de useMemo y useCallback para datos computados
Splitting de código para reducir el tamaño del bundle inicial
Lazy loading de componentes y rutas para mejorar el rendimiento inicial