Zustand Proof of Concept

[sejas]

Note

This PR is not meant to be merged. It's just an exploration.

Related issues

• Related to https://github.com/Automattic/dotcom-forge/issues/10209
• Equivalent to MobX proof-of-concept #796

Proposed Changes

• Proof of concept that migrates ChatInput React Context to independent Zustand store

Testing Instructions

• Test if the Assistant text input is saved independently for each site.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[nightnei]

I just recalled that I am using Zustand on https://ggwp.team/ 😄
Why? Because I asked ChatGPT "Recommend me some fancy state manager for React, I want to try it just for fun" 😁

The PoC looks cool, thanks for preparing it 👍

As I said on our weekly - I am a fan of MobX, it's classic, simple and stable solution. Also I tested it in action on big projects.
I am positive that Zustand can also do its job very well, so from my perspective, I am okay with any tool, as long as we achieve our main goal: having a state manager.

[fredrikekelund]

I played around with this some more and stand by my conclusion that Zustand isn't the best choice here.

MobX is more flexible in defining stores, which I think will benefit us by requiring less mental overhead if we adopt commonsensical conventions like stores being classes with properties and methods.

With Zustand, we can accomplish the same thing, but the store code is less readable because set calls are quite verbose, and deciding which functions should live in the store definition vs as auxiliary functions (using useChatStore.setState) is less intuitive.

I spent some time creating two equivalent stores based on ChatProvider in MobX and Zustand to compare them side by side:

• MobX store gist
• Zustand store gist

A few initial observations:

• Both options are an improvement over what we have today.
• The resulting stores are relatively small (and relatively similar), so it's difficult to draw definitive conclusions. Still, I think my previous point about code organization in MobX holds up—it's more straightforward.
• Type definitions are more tedious for the Zustand store. This might not always be apparent, but it'll generally be easier for TS to intuit types from a straightforward class, meaning less repetition when writing code.

Having thought about this for a few more days since our hangout on Monday, Redux is also still floating around my head as a potential contender—both because of its familiarity and because I don't think it'd be controversial in the same way that MobX or Zustand could potentially be.

[sejas]

Redux is also still floating around my head as a potential contender—both because of its familiarity and because I don't think it'd be controversial in the same way that MobX or Zustand could potentially be.

Yep! Redux is kind of the de facto library in mature software. Maybe a P2 could bring some light about others using a different library.

[fredrikekelund]

This implementation could potentially be improved, but for comparison, here's a Redux version.

As pragmatic a choice as Redux may be, I can't help but recoil slightly when comparing them side by side like this because of the added complexity and overhead that Redux brings. I'm not saying it's the wrong choice, but still…