Kind of a general question. How do you share state between tabs? I’ve used context wrapping the whole router that contains state for all components that share state between pages. (Think user interacetion on tab1 affects components on both tab1 and tab2).
The problem with this is that it redraws all components on the page even though they are not using the shared state. This is because the context wraps the whole page. I need to wrap the whole router including all the pages with context because the context is shared.
I tried using this solution: How to Dispatch an Action to Update a Sibling in React | by Fang Jin | JavaScript in Plain English
But this requires that the components be pre-drawn which gets really messy.
Any ideas?
is there really a performance issue or is this just something that is bothering you? That is the way Context API works… you can always try another state manager
It’s not a performance issue (yet) and it may never be, but using context in this way makes the code less neat and harder to understand i.e. components can’t just take care of their state in their own file so it’s an issue of code organization and readability. Also, this just personally bothers me and I like learning clever ways to solve a problem.
In the end, I doubt I’ll find an answer to this without going through a redux route (which I won’t want to because a simple app shouldn’t warrant redux imo).
there are alternative state managers, here are a few that I have tried that are less complex than redux IMHO
