Building the interface of a platform that generates video, audio and images with AI isn't like making a dashboard. Real-time streaming, heavy previews, complex async states. Here's how React let us handle everything.
UI reacting to unpredictable async events
In LetsAI: click "Generate" → server accepts → worker processes → SSE updates (queued → 30% → 60% → completed) → final file streaming. All real-time in the interface. React with useState, useEffect, useCallback, useMemo gives us the needed granularity. GenerationCard updates only when ITS job changes — not the other 50 in the list.
Custom hook for SSE streaming
The useSSE hook opens EventSource to /api/events/{jobId}, parses events and updates local state. On unmount closes the connection. Trap: EventSource auto-reconnects but doesn't tell you. If the job finished meanwhile, you're stuck. Solution: on reconnect HTTP fetch current state. If completed, close SSE. Production latency: under 100ms between server event and UI update.
Heavy previews: lazy loading and virtualization
An active user has hundreds of generations in gallery. Loading all at once would kill the browser. Lazy loading with IntersectionObserver (useInView hook) for thumbnails. Virtualization with react-window: only visible rows in DOM. Result: 500 items in gallery, opens <200ms, smooth 60fps scroll. Without virtualization: 3,000+ DOM nodes, browser struggling. Videos with preload="none". Audio with lightweight custom player — zero 50KB libraries.
State management without Redux
No Redux, Zustand or MobX. Global state with Context + useReducer (user, credits, theme). Local state for everything else. Why? Most state is component-local. Credits change rarely — Context with memo is enough. Only complex state: active generations list. useReducer with typed actions (ADD_JOB, UPDATE_JOB, COMPLETE_JOB, FAIL_JOB). Predictable, testable, zero dependencies. Smaller bundle, less boilerplate. New developer immediately sees where state lives — in the component using it.
Related Services
See how we apply these technologies in our enterprise projects.
Interested?
Contact us to receive a personalized quote.
Securvita S.r.l. — i3k.eu