You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is my current iteration. I feel like I went off the beaten path... It seems to work, albeit being kinda hacky. I would love feedback or if there's any other prior art that solves a similar issue
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hey, I'm building a React component library for AI chatbots.
The state is managed through React Context objects containing zustand stores:
There's a Thread -> multiple Messages -> multiple ContentParts (text/image/...), each with their own layer of zustand stores, i.e.
The ThreadStore is the single source of truth, the other stores are simply "Views" on the Thread store.
What is the best practice to design a system like this?
Here are my attempts so far:
V1 useMemo to sync
Problem: react warns about setState calls inside the render stage. This code is probably not safe in concurrent mode.
V2 useEffect to sync
Problem: this causes some visual tearing, as it requires three render passes for updates to flush
V3 subscribe inside useEffect to sync
This is my current iteration. I feel like I went off the beaten path... It seems to work, albeit being kinda hacky. I would love feedback or if there's any other prior art that solves a similar issue
Beta Was this translation helpful? Give feedback.
All reactions