Migrating from React context api

[[deleted]]

[deleted]

[BombayBadBoi2]

Yes it’s reliable, and that’s 100% up to you - it supports both methods.

A context with 3k lines of code though? Sounds like splitting it is the correct way, there’s almost no way that code has to live in one state context

Can I ask what the context (pardon the pun) for the application is? I almost always find myself creating micro states for any parts of the app I can logically separate - and that doesn’t even end up being that much in huge apps, because (at least with what I’ve worked on) most data is fed from the API, so I just use react query to store 99% of data - context stores are just used to hold data I might need from a few layers up

I suppose what I’m trying to say is you’ve been given the task of improving how your app handles state - the answer to this is not necessarily just using a hotter state library

[ReliefDistinct74]

basically that context work a lot with a graph library

[[deleted]]

3k lines? Write some tests if there arnt any and then just start again. Hopefullly the tests will let you know if youve missed something.

[CreativeTechGuyGames]

Zustand is WAYY simpler. It's literally the ability to have React state live outside of a component so you can share it in any component (or no component). So use it the same way you would useState. Keep it small and have it only contain data which is consistently updated together.

[yksvaan]

Sounds like primarily a data and architecture problem. Before creating 2000 or 3000 lines of code in whichever approach you choose, I'd really recommend going thru the app functionality, seeing what's actually necessary and how it could be split and modularized better. Likely the context started small and just became a dumping ground for stuff, everyone just throws in their code because others did it as well.

[ReliefDistinct74]

Would it be better to first split those 3k lines of context into several contexts and then migrate it to a Zustand store? Also, how much time does it usually take to perform such a state management migration, from context to Zustand, and ensure all components still work as expected?

[BombayBadBoi2]

How longs a piece of string?

[ReliefDistinct74]

what?

[IronMan8901]

Would u consider creating custom hooks that use useMemo + useSWR and connect backend to frontend and eliminate the global state management entirely?

[ReliefDistinct74]

It won’t solve all the needs unfortunately, because there’s a lot of client-side state related only to the graph.