feat(react-client): migrate from recoil to zustand #1870

aleks3fs · 2025-02-06T15:03:20Z

There is an issue with running @chainlit/react-client, with latest React 19 and issue seems to be connected to usage of recoil.

In this PR I've

replaced recoil with zustand. I tried to combine logically connected parts of the state into stores.
bumped React to v19

It'd be nice to have this in the latest version, but I haven't been able to test everything.

jbeckerdm · 2025-05-09T11:01:37Z

I've just done the exact same thing before finding this PR https://github.com/jbeckerdm/chainlit/tree/zustand 😆

Looks great! This already allows custom frontends to update to React 19.
I think this would break chainlits own frontend, so we need to fix the usage of react-client in the chainlit frontend as well before this gets merged.

- Migrate from recoil to zustand - Bump react to v19 # Conflicts: # libs/react-client/package.json # libs/react-client/src/state.ts # libs/react-client/src/types/index.ts # libs/react-client/src/useChatSession.ts

aleks3fs · 2025-05-12T06:18:18Z

If someone finds time to take this one over, since I might not have enough time, I'd appreciate it. Or if yours gets merged, I'm fine with both, as long as we get progress on compatibility with the latest version 😄

jbeckerdm · 2025-05-12T12:33:24Z

I'm gladly taking this over.
In fact I forked your code, updated tsup to fix the build, and started using it with my custom frontend to test.
I don't know how a PR takeover works, since I cannot push into your fork branch. Can we swap it with my fork of your branch https://github.com/jbeckerdm/chainlit/tree/migrate-recoil-zustand, or would I work on yours?
Either way is fine by me.

aleks3fs · 2025-05-12T12:39:30Z

Wonderful 🙏, I've sent you an invite for my fork, but do whatever is easier for you. I don't really care, as long as we get some progress on this 😄

jbeckerdm · 2025-05-12T12:48:57Z

Updated the source branch with my changes.

export the stores so they're usable outside the library
bring over the new mcp store, including local storage persistance (which comes included in zustand)
update tsup, since the old version had a DTS build error with zustand. Updating it fixes that.

jbeckerdm · 2025-05-13T14:10:53Z

To make the tests run, I also replaced every usage of react-client's state in the chainlit frontend and copilot lib.
They now build successfully, though I can't get the tests themselves to run locally just yet.

jbeckerdm · 2025-05-23T12:04:28Z

All chainlit E2E tests run successfully.
I think this can be reviewed, and we can decide on the final structure and splitting of the atoms into the different stores.

@willydouhard I'd like to ask you or other core chainlit maintainers for a first feedback on this, if possible.

This enables upgrading the chainlit frontend as well as anyone using it to upgrade to React 19, and also allows for more flexible store structures.
From our first testing with React 19 (and this zustand rewrite) in our 3000+ user chainlit app, we've also seen great performance improvements in the frontend.

tegarmonster · 2025-06-09T03:53:52Z

any update for this? :)

FlawaCLV · 2025-06-16T07:39:26Z

Any update? Any help needed?

jbeckerdm · 2025-06-17T07:17:35Z

@FlawaCLV @tegarmonster
First and foremost we need a reviewer, because I'd like to know if the implementation is good or needs improvements.
Given how the chainlit team announced that they'll stop maintaining chainlit however, I feel like noone really wants to look into this at this time.

FlawaCLV · 2025-06-17T07:27:27Z

@jbeckerdm thanks for the update! I missed the news that they wanted to stop maintaining the project. I understand now why this PR is stalling.

tegarmonster · 2025-06-17T07:28:40Z

@FlawaCLV @tegarmonster First and foremost we need a reviewer, because I'd like to know if the implementation is good or needs improvements. Given how the chainlit team announced that they'll stop maintaining chainlit however, I feel like noone really wants to look into this at this time.

ah I see, thanks for the information

zomchak-code · 2025-06-17T11:52:52Z

@jbeckerdm
Could you share a link to this announcement?

Given how the chainlit team announced that they'll stop maintaining chainlit however

aleks3fs · 2025-06-18T06:30:57Z

@jbeckerdm Could you share a link to this announcement?

Given how the chainlit team announced that they'll stop maintaining chainlit however

It's on the main page of the repo, 1st part of the readme
https://github.com/Chainlit/chainlit/blob/main/backend/README.md?plain=1#L2

…ide effect

jbeckerdm · 2025-06-18T15:48:51Z

chatSettingsDefaultValue isn't properly populated yet,
but perhaps we can define it in some other way (or well fix the issue).

If anyone wants to look into that, feel free!

hayescode · 2025-07-01T02:47:21Z

I am 1 of 2 users who received maintainer access. My strong suit is backend though and I'm not sure if the other maintainer has frontend experience. Can some of you review this and document any breaking changes/workarounds? This seems like a great PR but given the creator has left we're all in a tough spot. I don't want to further delay the huge backlog of improvements any further (just pushed 25% of outstanding PRs) but this is a big change that deserves more community feedback especially since this isn't my area.

jbeckerdm · 2025-07-03T15:57:27Z

@hayescode I'm essentially the new maintainer of this PR.
I'm trying to fix a very specific bug with the chat settings not loading (as in, the backend doesn't send the chat_settings websocket event to the frontend), which currently occurs in a test branch where I use this new code on our custom frontend/backend. It worked just fine with the newest chainlit react client and react 18, but now this hard to find bug occurs about half the time, and only in our CI test environment, not locally.
Since we didn't touch our backend in that branch, I suspect it's some edge case in this PR's code, so it's important to find it for this PR to get merged as well.

jbeckerdm · 2025-07-03T15:58:05Z

But I encourage anyone to test this PR in their own way and review the code! I'll make sure to work through the feedback.

asvishnyakov · 2025-07-03T16:19:13Z

@jbeckerdm Hi Jannis.

I'm the other maintainer, and while React isn’t the primary framework of choice used by me or my company, I do have frontend experience and a background in building frameworks.

I really appreciate your work, and in my opinion, the upgrade to React 19 looks good. However, switching from one state management library to another is a breaking change - especially since you’re modifying the shared react-client library. This library is used by developers who can't or don't want to use the full Chainlit frontend. Making such a change could create a cascade of compatibility issues in their projects, which I’d like to avoid.

Regarding performance: it’s great if switching to zustand brings improvements. I submitted a similar performance-focused PR on the backend side, and it wasn’t accepted right away and for good reason. I think we need more measurable evidence before making changes like this, such as writing performance benchmarks or tests.

So, I’d like to propose the following plan:

Split out the React 19 upgrade into a separate PR. Or, if you don’t have the time, I can take care of it later.
Create an issue in the Chainlit repo describing the bug you're experiencing, including as many details as possible. If we’re able to reproduce the issue and determine that switching to zustand is the only viable fix, or if we gather clear performance data showing a benefit, we can revisit this PR and move forward with it.

Thanks again for your contribution!

aleks3fs · 2025-07-04T06:46:30Z

@jbeckerdm Hi Jannis.

I'm the other maintainer, and while React isn’t the primary framework of choice used by me or my company, I do have frontend experience and a background in building frameworks.

I really appreciate your work, and in my opinion, the upgrade to React 19 looks good. However, switching from one state management library to another is a breaking change - especially since you’re modifying the shared react-client library. This library is used by developers who can't or don't want to use the full Chainlit frontend. Making such a change could create a cascade of compatibility issues in their projects, which I’d like to avoid.

Regarding performance: it’s great if switching to zustand brings improvements. I submitted a similar performance-focused PR on the backend side, and it wasn’t accepted right away and for good reason. I think we need more measurable evidence before making changes like this, such as writing performance benchmarks or tests.

So, I’d like to propose the following plan:

Split out the React 19 upgrade into a separate PR. Or, if you don’t have the time, I can take care of it later.

Create an issue in the Chainlit repo describing the bug you're experiencing, including as many details as possible. If we’re able to reproduce the issue and determine that switching to zustand is the only viable fix, or if we gather clear performance data showing a benefit, we can revisit this PR and move forward with it.

Thanks again for your contribution!

Hey,

while performance boost is cool, the base idea of this PR was to enable upgrade to React 19. Latest version of recoil doesn't support react 19, and that is because recoil is deprecated. It was always an experimental library, so it was bound to happen.

It's really easy to dismiss performance improvement, if there isn't a bottleneck, but this one not it, at least not at its core.

Basically, if chainlit doesn't change from recoil to something else, then we cannot upgraade chainlit's react to 19, which means that any developer using chainlit's lib won't be able to do it either.

asvishnyakov · 2025-07-04T13:33:03Z

@aleks3fs Thank you for the explanation! I didn't see the deprecation message anywhere until I opened their repo. In that case, I think we don't have many options left, so I'll review this PR.

jbeckerdm · 2025-07-07T12:21:34Z

The aforementioned bug with chat_settings not loading has turned out to be a side effect of our custom frontend's connection logic, and is NOT related to this PR.
Which means that the PR is ready to be reviewed.

neel004 · 2025-07-13T18:23:29Z

Hey @asvishnyakov, Great to have you on board as maintainer.
At the moment, the current Chainlit version makes it impossible for us to upgrade our React to 19. I noticed that this pull request might addresses this issue, I believe merging it would greatly benefit users who rely on React 19 compatibility.

May I kindly request your attention to reviewing and, if appropriate, merging this change at your earliest convenience? Your assistance would be greatly appreciated.
and @aleks3fs @jbeckerdm thanks for this pr

neel004 · 2025-07-28T12:37:45Z

Just popping in to check if there’s any chance this PR could get a review soon. We’re kinda stuck on React 19 support without these changes, so merging this would really help out!

Let me know if there’s anything you need from my end, or if there’s something holding things up.

Thanks so much for keeping things moving — really appreciate all the work everyone’s putting in!

hayescode · 2025-07-28T16:13:18Z

CI needs to be updated to work with this

asvishnyakov · 2025-07-28T17:01:13Z

@hayescode I'm working on that here and in few other PRs, let's wait until you return at Wednesday, I think it should be ready

asvishnyakov · 2025-08-03T00:46:18Z

libs/react-client/src/store/auth.ts

+  authConfig?: IAuthConfig;
+  user?: IUser | null;
+
+  threadHistory?: ThreadHistory;


While thread history is available only to authenticated users, I don't think it should be part of AuthState. It should be a separate state instead, as including it violates SRP.

asvishnyakov · 2025-08-03T02:17:16Z

libs/react-client/src/store/utils.ts

+  (state: T | ((state: T) => T), replace: true): void;
+}
+
+export const stateOrSetter = <T, K extends keyof T>(


Why do we need this helper, if set already support this?

asvishnyakov · 2025-08-03T02:26:35Z

libs/react-client/src/store/chat.ts

+
+import { stateOrSetter } from './utils';
+
+// import { subscribeWithSelector } from 'zustand/middleware/subscribeWithSelector';


Please remove a comment (did you forget something?)

asvishnyakov · 2025-08-03T02:30:14Z

libs/react-client/package.json

  "name": "@chainlit/react-client",
  "description": "Websocket client to connect to your chainlit app.",
-  "version": "0.2.4",
+  "version": "0.3.0",


Please don't change version, we do it only at release time

asvishnyakov · 2025-08-03T02:36:09Z

libs/react-client/src/store/chat.ts

+    const chatSettingsValue = get().chatSettingsInputs.reduce(
+      (form: { [key: string]: any }, input: any) => (
+        (form[input.id] = input.initial), form
+      ),
+      {}
+    );


Can we eliminate code duplication?

asvishnyakov · 2025-08-03T04:42:29Z

So actually, after careful review, here are my two biggest concerns:

After merging this PR, we’ll be using React 19 in libs/react-client and React 18 in the frontend itself. This is highly risky in my opinion, especially since we’re not building or testing the frontend and libs against different React versions.
I made a few mistakes during merge and minor refactoring, and surprisingly the build didn’t fail - even though I removed a variable that was still in use, which led to a runtime error. Only the E2E tests caught it. I’d like to address this issue first.

@hayescode FYI

mb-dbridge · 2025-09-25T11:09:35Z

Hello! I can see this is still open with a 2.8.0 milestone while 2.8.1 has been released.
I'm wondering if there's any plan on re-prioritising this, or if there are any other plans?
Thanks for any update you could provide.

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. frontend Pertains to the frontend. labels Feb 6, 2025

jbeckerdm added 4 commits May 9, 2025 14:03

feat(react-client): migrate from recoil to zustand

78e01e3

- Migrate from recoil to zustand - Bump react to v19 # Conflicts: # libs/react-client/package.json # libs/react-client/src/state.ts # libs/react-client/src/types/index.ts # libs/react-client/src/useChatSession.ts

fix(react-client): add store exports

724807f

fix(react-client): fix tsup build

b91e776

feat(react-client): add mcp zustand store

c777d6c

jbeckerdm force-pushed the migrate-recoil-zustand branch from f6ac16d to c777d6c Compare May 12, 2025 12:43

jbeckerdm mentioned this pull request May 12, 2025

Recoil is obsolete, project should use jotai or zustand #1448

Open

jbeckerdm added 2 commits May 12, 2025 16:57

fix(react-client): move chatInputs to chat store

da6f961

chore(frontend, copilot): replace recoil with new zustand stores

0d850d3

fix(frontend): fix wrong setThreadHistory call after zustand update

611f0c4

Merge branch 'main' into migrate-recoil-zustand

c5b5e1b

jbeckerdm force-pushed the migrate-recoil-zustand branch from 3f4b422 to 7c70fa7 Compare June 18, 2025 15:24

fix(react-client): define chatSettingsValue type. add default value s…

cbc21ee

…ide effect

jbeckerdm force-pushed the migrate-recoil-zustand branch from 7c70fa7 to cbc21ee Compare June 18, 2025 15:26

fix(react-client): allow partial chatsettings update

08b3cb6

jbeckerdm added 2 commits June 27, 2025 12:39

fix(react-client): chat settings value not merging correctly

855bcf1

fix(react-client): revert auth edits

cba5a55

jbeckerdm added 2 commits July 1, 2025 09:00

Merge branch 'main' into migrate-recoil-zustand

3238b88

Merge branch 'main' into migrate-recoil-zustand

9435426

asvishnyakov self-requested a review July 15, 2025 04:01

asvishnyakov and others added 3 commits July 15, 2025 06:01

Merge branch 'main' into migrate-recoil-zustand

793258e

Merge branch 'main' into migrate-recoil-zustand

0e02abb

Merge branch 'main' into migrate-recoil-zustand

6f3fe87

Merge branch 'main' into migrate-recoil-zustand

9597404

refactor: get rid of abbreviations

185f56e

asvishnyakov requested changes Aug 3, 2025

View reviewed changes

asvishnyakov added 3 commits August 3, 2025 05:32

Merge branch 'main' into react-19

1dd5479

fix: fix remaining merge issues

68ab544

fix: merge & refactoring issues

c996fdd

asvishnyakov added the keep-for-a-while Don’t mark as stale. This label should be used only for confirmed bugs or other important things label Aug 5, 2025

asvishnyakov added this to the 2.8.0 milestone Aug 15, 2025


		import { stateOrSetter } from './utils';

		// import { subscribeWithSelector } from 'zustand/middleware/subscribeWithSelector';

feat(react-client): migrate from recoil to zustand #1870

Are you sure you want to change the base?

feat(react-client): migrate from recoil to zustand #1870

Uh oh!

Conversation

aleks3fs commented Feb 6, 2025

Uh oh!

jbeckerdm commented May 9, 2025

Uh oh!

aleks3fs commented May 12, 2025

Uh oh!

jbeckerdm commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aleks3fs commented May 12, 2025

Uh oh!

jbeckerdm commented May 12, 2025

Uh oh!

jbeckerdm commented May 13, 2025

Uh oh!

jbeckerdm commented May 23, 2025

Uh oh!

tegarmonster commented Jun 9, 2025

Uh oh!

FlawaCLV commented Jun 16, 2025

Uh oh!

jbeckerdm commented Jun 17, 2025

Uh oh!

FlawaCLV commented Jun 17, 2025

Uh oh!

tegarmonster commented Jun 17, 2025

Uh oh!

zomchak-code commented Jun 17, 2025

Uh oh!

aleks3fs commented Jun 18, 2025

Uh oh!

jbeckerdm commented Jun 18, 2025

Uh oh!

hayescode commented Jul 1, 2025

Uh oh!

jbeckerdm commented Jul 3, 2025

Uh oh!

jbeckerdm commented Jul 3, 2025

Uh oh!

asvishnyakov commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aleks3fs commented Jul 4, 2025

Uh oh!

asvishnyakov commented Jul 4, 2025

Uh oh!

jbeckerdm commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

neel004 commented Jul 13, 2025

Uh oh!

neel004 commented Jul 28, 2025

Uh oh!

hayescode commented Jul 28, 2025

Uh oh!

asvishnyakov commented Jul 28, 2025

Uh oh!

asvishnyakov Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

asvishnyakov Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

asvishnyakov Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

asvishnyakov Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

asvishnyakov Aug 3, 2025

Choose a reason for hiding this comment

Uh oh!

asvishnyakov commented Aug 3, 2025

Uh oh!

jbeckerdm commented May 12, 2025 •

edited

Loading

asvishnyakov commented Jul 3, 2025 •

edited

Loading

jbeckerdm commented Jul 7, 2025 •

edited

Loading

asvishnyakov Aug 3, 2025 •

edited

Loading