But now, as I approach the final stage, I realize how much I’ve grown compared to when I first started.
I can see real progress — not just in my technical skills, but also in the way I approach problems and make decisions.

Today’s takeaway: keep shared state local when possible, and introduce context only when it truly simplifies communication between components.

Using global state felt like overkill and brought concerns about cleanup on unmount. In this case, managing the state in the parent component seems to be the most straightforward solution. If the component structure becomes more complex, Context API would be a reasonable alternative.

Since the title and content are handled in separate components, I had to think about where to manage the combined state. I first asked the backend team to separate the update logic, but to follow the existing API, the frontend needs to hold and send both values at once.

The backend requires both the title and content to be sent together when updating a note. If I send only the title and leave the content as null, it gets overwritten, so I always need to send both values — even if I’m only changing one.

• To handle this correctly, tools like RecordRTC or webm-muxer are used to either align chunks to keyframes or remux them properly.

• WebM chunks must start with a keyframe to be properly playable.
• Simply slicing the stream at fixed intervals can cause playback issues if the chunk doesn’t start with a keyframe.

Zustand works well for fast and lightweight solutions, while XState provides a more robust and declarative approach for complex systems.

In conclusion, both are excellent tools for state management, but the right choice depends on the complexity of your app and whether explicit state transitions are necessary.

Zustand shines when:
• You need to share state quickly and simply
• The app’s state logic is relatively straightforward
• You’re building a small app or prototyping fast

XState is particularly powerful when:
• Managing multi-step forms with interdependent logic
• Handling async API states (idle, loading, success, error)
• You need a predictable, visual representation of state transitions

This makes XState a great fit for applications with complex UI flows, asynchronous logic, or intricate user interactions.

On the other hand, XState goes beyond just storing and updating state. It’s built around the concept of finite state machines and explicit state transitions. Each state and its transitions are declared clearly, which makes it easier to understand what can happen and when.

It’s especially well-suited for small-scale apps or simple logic.

Zustand is a lightweight and intuitive state management library. Unlike Redux, it requires minimal boilerplate and feels similar to using React hooks for state. One of its strengths is that you can access state outside of React components, making it very flexible.