Legend State v3: Local first sync AND fastest React State manager!

[@MohammedWaseemAnjum]

Hey jack! you really awesome this 2025! keep it up more tutorials more learnings! thank you so much.

[@Valiant600]

Imho, Zustand + RQ is probably the most optimal approach. We use it for production with great results. Always good to have options though.

[@lakshmanshankar]

Can u explain for what kind things you guys use zustand for, d u pass state from react query to zustand. How to keep like single src of truth when using both

[@Valiant600]

@@lakshmanshankar zustand is mostly for UI state and global state that we cannot handle through server state. For instance, checking if an aside component is open but you change routes and want to check in a different component.

[@jherr]

I love this conversation!

[@TianYuanEX]

Honestly, I found legend state to be even easier to setup and use than zustand (and more performant according to benchmarks). The only downside was refactoring the code when they updated from v1 to v2 (and now to v3) but even that was a relative breeze There is nothing zustand offers that legend state doesn't, while having better DX and perf, so I see no reason to use anything else as a global state manager (unless it's a very large project already using a different client-side global state manager)

[@simransingh1507]

We replaced Redux Toolkit with Zustand, and it's the best thing we did for our CRM app. It feels lighter, the code structure is way cleaner, less boilerplate. Love Zustand ❤

[@yzz9833]

Truly everything I’ve wanted out of a state manager in this new nextjs app router paradigm.

[@ImInYourBrains]

I want Legend-State to succeed. I like Zustand but I feel that Legend-State is easier and is more convenient for implementing a lot of signal like reactivity. What it lacks is support, a large community, and many advanced implementations or usages. As someone who has used V1 and currently using V3, it feels like Im in the wild west everytime I investigate issues or try to improve implementation. I will be sending money your way either in the form of Patreon subscription or buying you a coffee in the hopes that you can do a video where you actually build a serious app using Legend-State. Its a large undertaking, so I doubt my wish will come true, but you are one of the only creators that puts out videos about my favorite state-management library...so Im still holding out hope lol

[@kiranojha8811]

I would rather use mobx with mst

[@ImInYourBrains]

@@kiranojha8811 i used mobx too. I still prefer Legend-State. MobX already has a larger userbase so why are people spamming it here? Its annoying. Like, great man. Nobody is stopping you from using it. I want Legend-State to get more attention because it is great and its not replacing MobX. More options is good.

[@ImInYourBrains]

@@kiranojha8811 I would rather use LegendState

[@flexbox_]

I am a happy user of Legend State since Chain React #4 because the library have a cool name -that's enough to ship features 🤣

[@burhan.yilmaz]

Awesome tutorial!

[@stephensanwo]

What is the strategy for conflict resolution? I am assuming it is last update wins right? In your example where you went offline, changed the client state, and the server state, you did that on two different form fields, it would have been nice to see what would happen if you did that on the same field...Also it will be interesting to see what happens when using this for something like a markdown editor, where you want to merge the changes between two clients, and not necessarily overwrite with the last changes.

[@flock4692]

I am building an Expo + Supabase social media app and want to use LegendState to store data like the messages on the device. My problem is that my messages model of the app joins different tables, like the users, conversations, and participants tables, to get all the required information. How can I achieve this? As far as I know, I cannot directly join the tables when using the Supabase plugin and put the required data of this specific user in the observable. Do I instead have to get all of the tables and do some basic filtering and then kind of join the observables?

[@devfren]

You need to create a Postgres view. To do all the joins at the database level. Then you can directly query the view with supabase (it acts just like a table)

[@whynot9963]

Supabase does support joins. Syntax would be something like from("user").select("*, messages, other stuff"). The first asterisk gets everything from use, and then you say join messages. This would require you to have user_id on messagess. But there is a way also to specify which columns to look for. If joins are super complex, as Jordan mentioned above, go with the view. Or just use Kysely instead of their library

[@ivan.jeremic]

MongoDB.

[@kristianlavigne8270]

Yes, using views is the way to go 😊

[@flock4692]

@@whynot9963 can you use Kysely in the frontend? I thought this was a Edge function thing.

[@kartikkaushik4743]

Thanks jack for the awesome content

[@yarrichar]

10:47 - it would have been nice to cover what happens if the same field is updated on the server while you're offline. I assume there's no merging, it's last write wins (including if my browser has been offline for a week)?

[@jherr]

You'd have to implement the logic for the merge yourself. Although from what Jay says support for a merge strategy will be coming in later releases.

[@vladimirmryscuk8409]

thanks for the content

[@RodrigoCFD]

MobX has taken this approach years ago...

[@lenghak_hok]

Sir, could you do a video comparing legend state manager vs nanostores? Really like to how fast legend can do.

[@marvinfok65]

Can v3 be use in React Native Expo? Doing a RN expo project currently looking for suitable state management with observable.

[@divinenii]

yes, I use it in RN, check their docs

[@r-i-ch]

Thanks for the demo! Non-Happy Path?

[@somewonderfulguy]

Innit MobX in disguise? ) But seriously, if it Proxies, how well will it go React 19 compiler? This RQ sync seems very powerful. I usually don't mix server & client state but seems like here's another approach.

[@vvvvvvvvvwv]

From twitter the creator says you should be able to use react forget compiler alongside Legend state. But since Legend state gives you signal like primitives for fine grained reactivity, I'm not sure if you'll see huge benefits from the compiler.

[@RenjithRs123]

Signals vs Legend, which state manager os best ?

[@jomoc6112]

wait im a fan of your last video about zustand + react query. is it safe to move to legend state?

[@markli7641]

there will be data conflict with offline sync . right?

[@jherr]

Right, that's what the code is doing is taking one approach to resolve that conflict. There are multiple patterns for conflict resolution.

[@juanvieira8249]

Thank you for this! Amazing! Is anyone else getting errors when trying to use "reactive" with the ShadCN Input? Even copying from repo is breaking for me. Using NextJS 15.0.2 and @legendapp/state 3.0.0-beta.15

[@EdwinMartin]

1:48 Aren’t HOCs a bit obsolete? Why not use hooks that are easier, like other libraries do?

[@michaelchristianwisniewski4494]

observer isn't a HOC. It is creating a proxy around the component that will track all accessed observables with a single hook

[@EdwinMartin]

@@michaelchristianwisniewski4494 Oh, I meant HOF. A function that has a function argument and returns a function is a HOF. observer() is a HOF.

[@michaelchristianwisniewski4494]

@@EdwinMartin Nothing wrong with HOFs. Also the same in the context of functional components. As this is just creating a proxy this still just returns a props->component not a component returning props->component. So no crappy dx with nested components in react dev tools . And this is just the convenient and optimized fast way to handle this. You could also create an observing context inside the component using observe(() => {...})

[@LEDsellers]

Can we just use trpc for the querying, then store the data locally?

[@jherr]

So both tRPC and Legend State are wrapping RQ in this case. So my guess is that you'd probably need to invoke the tRPC call yourself in the Legend State observable hook using RQ. Or check out the implementation of the observable hook and create your own that makes tRPC calls. Technically very possible, but, right out of the box, I don't think so.

[@jherr]

Unless your talking about not using Legend State at all. I mean sure. You can handle storing the data in local storage yourself, and doing the sync logic if that's what you want to do.

[@LEDsellers]

@@jherr Basically I want to query a local version of the data first in an already existing trpc call and use legend instead of zustand for state management. Right now I’m manually doing all of that using zustand via a middleware adapter (indexedDb)

[@umardev500]

plase make viedeo about legend list too sir

[@RusuTraianCristian]

Using the offline sync feature (via localStorage) will make your app more susceptible to attacks, as localStorage is very much not safe. Maybe I am missing something?

[@trejohnson7677]

Legend state + xstate

[@thisweekinreact]

first

[@ilyasanders4169]

The best state manager is MobX

[@im7254]

Nextjs = garbage

[@somewonderfulguy]

Your opinion is very important to everybody.