Tu privacidad es importante

    Utilizamos cookies para mejorar tu experiencia, mostrar contenido personalizado y analizar el tráfico del sitio. Para más información, visita nuestra política de cookies.

    Volver

    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:

    1. Estado del servidor: React Query gestiona todos los datos que vienen del backend, incluyendo su caché y sincronización.
    2. Estado global: Para estado que debe ser accesible en toda la aplicación, usamos Context API.
    3. Estado local: Para componentes individuales, usamos useState y useReducer según la complejidad.
    4. Estado de formularios: Utilizamos react-hook-form para manejar el estado de los formularios y su validación.
    5. 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