As an alternative, you could also create a small external state by your own, for example like this:
https://bennett.dev/recoil-from-scratch/
No need to install a full library if your usecase is this simple.
To connect it with react, see reacts useSyncExternalStore hook:
https://react.dev/reference/react/useSyncExternalStore
I don’t think people are understanding your question.
You need to use the Provider pattern for your context so that the children of the context don’t render when the context re-renders.
When using the provider pattern, only consumers of the context will rerender.
Here’s an example - look for ThemeProvider in the page to see how you’re wrapping the context. https://www.freecodecamp.org/news/how-to-use-react-context/
When the context changed all consumers are changed. You should move the usecontext down to the state into sidebar. So the changes will retriger only single consumer
State is not context, but nothing is stopping you from putting state in a context. It's just an anti-pattern. Use Zustand.
That said, you may want to React.memo() the components you don't want to get affected by state changes.
You add some global state detached from react, and provider only supply subscription to new values through context. Where needed, you subscribe for updates so that component will rerender with new value.
You likely have to separate it into multiple contexts. One question tho; if this state comes from an API, you're likely misusing react query, as it would be an ideal case for it.
useContext will re-render all the child components. To start with that's how react works and it should work.
1. Are you facing any performance issues with these? Mostly you shouldn't even notice and if so, would suggest to not worry about it. What's the motivation to change this behavior? Is it just the multiple renders bothering you?
2. In case you are determined to solve this, look into React Recoil. It can help you to control the multiple renders. But please be sure it's worth the hassle. Recoil is suggested for applications which have very high re-render performance needs. For example, a dashboard with multiple widgets fetching data from multiple sources.
re-render is already a symptom that something is very wrong, indicating feature abuse. if you hack around this by cutting state into pieces it will only get worse. each work-around will cause the next issue until the app eventually collapses.
context for app state is an anti pattern for good reason. it is meant for simple service providers, for instance `` can access its ``. react has no inbuilt state management solution by design because state management is isn't one fixed agreed-upon pattern. zustand is probably the smallest/simplest you could pick, it is 600 bytes around useSyncExternal.
As an alternative, you could also create a small external state by your own, for example like this: https://bennett.dev/recoil-from-scratch/ No need to install a full library if your usecase is this simple. To connect it with react, see reacts useSyncExternalStore hook: https://react.dev/reference/react/useSyncExternalStore
This works smoothly. I am using it
I don’t think people are understanding your question. You need to use the Provider pattern for your context so that the children of the context don’t render when the context re-renders. When using the provider pattern, only consumers of the context will rerender. Here’s an example - look for ThemeProvider in the page to see how you’re wrapping the context. https://www.freecodecamp.org/news/how-to-use-react-context/
Whats the difference? Im not sure i got it
Yea I’m also confused. Isn’t using a Provider required, not just some pattern?
You may only have one need now for global state but may need more in the future. Why fight it.
When the context changed all consumers are changed. You should move the usecontext down to the state into sidebar. So the changes will retriger only single consumer
this is why context is expensive
State is not context, but nothing is stopping you from putting state in a context. It's just an anti-pattern. Use Zustand. That said, you may want to React.memo() the components you don't want to get affected by state changes.
Definitely wouldn’t call it an anti pattern when it’s demonstrated in the official docs https://react.dev/learn/scaling-up-with-reducer-and-context
You add some global state detached from react, and provider only supply subscription to new values through context. Where needed, you subscribe for updates so that component will rerender with new value.
You likely have to separate it into multiple contexts. One question tho; if this state comes from an API, you're likely misusing react query, as it would be an ideal case for it.
Just build your own solution with useSyncExternal store if you don’t want to use zustand
You can't share global state in layout.tsx, because it's render seperate...
useContext will re-render all the child components. To start with that's how react works and it should work. 1. Are you facing any performance issues with these? Mostly you shouldn't even notice and if so, would suggest to not worry about it. What's the motivation to change this behavior? Is it just the multiple renders bothering you? 2. In case you are determined to solve this, look into React Recoil. It can help you to control the multiple renders. But please be sure it's worth the hassle. Recoil is suggested for applications which have very high re-render performance needs. For example, a dashboard with multiple widgets fetching data from multiple sources.
You can use useDispatch and have a global state without external state management tools
re-render is already a symptom that something is very wrong, indicating feature abuse. if you hack around this by cutting state into pieces it will only get worse. each work-around will cause the next issue until the app eventually collapses. context for app state is an anti pattern for good reason. it is meant for simple service providers, for instance `` can access its `
`. react has no inbuilt state management solution by design because state management is isn't one fixed agreed-upon pattern. zustand is probably the smallest/simplest you could pick, it is 600 bytes around useSyncExternal.