Chapter 8: State Management - Capturing LLM Interactions with Zustand

[jrbrowning]

Note: The course content has moved to the front-end repository oai-format-tools-ui. A copy of this chapter's content is also available there.

In chapter 8, we implement a state management system using Zustand, enabling our frontend application to send requests based on intent. and save responses in our application.

(Looking for previous chapters? Find them here. The main branch contains the latest code, synchronized with the most recent chapter. To review earlier chapters, select the corresponding branch.)

Why Zustand (over Reux)

While Redux remains the standard choice for React applications, this tutorial deliberately introduces Zustand—a lightweight, JavaScript-specific state management library. Here's why:

1. Performance with Streaming Data
Traditional Redux implementations trigger re-renders on every store update by design. Our application handles Server-Sent Event (SSE) streams that deliver tokens at multiple updates per second. This high-frequency data flow can overwhelm the rendering engine and degrade user experience by blocking the event loop. By creating a separate store specifically for LLM interactions, we avoid these performance bottlenecks.

2. Minimal Overhead with Modern Patterns
Zustand provides the organizational benefits of modern Redux—data slices, actions, and selectors—without the boilerplate. Its lighter footprint translates to faster overall performance while maintaining clean, maintainable code patterns.

3. Dual-Store Architecture
This pattern allows us to separate concerns: one store (Redux) can manage UI state for user interactions between pages, button clicks etc, while another (Zustand) exclusively handles streaming and completion events from LLM endpoints. This separation keeps each store focused and performant.

Developer Tools Integration

State management debugging with browser developer tools:

1. Enable Redux DevTools extension
2. Access the state viewer:

• Mac: CMD + Shift + E to launch Redux state viewer
• Alternative: CMD + Shift + C → Dev Tools → Redux tab

Course Prompts

Explore the codebase with these Copilot prompts:

• @workspace What are selectors in this application and how do they help access state?
• @workspace What does adding Immer to this design improve?
• @workspace Where do streaming responses and completion responses get routed to the store?

---

Questions? Visit the Q&A board