Comments (3)
You could but it is a bad pattern and might cause issues with React future improvements.
Basically when you do:
const [data, { setData }] = useData();
if (!data) setData(true);
- you might call that function multiple times if the component re-renders again before
data
is updated - you will trigger an additional re-render, because that component is already subscribed to the store
Even wrapping setData
with useMemo
might not be enough as Concurrent Mode might run it twice anyway.
Given React owns the re-render schedule and when it happens, you better stick with patterns that ensure data consistency.
Indeed, Containers work in a different way, and the onInit/onUpdate
functions ensure that the effects are called only when needed as they rely on the component lifecycle.
However, if you are using the global scope, wrapping your tree in Containers is not mandatory. They are unlikely to cause performance issues, but you can add them as sibling of your main tree, before the consumers, and they will work fine anyway :)
const Root = () => (
<>
<DataContainer data={true} isGlobal />
<MyApp />
<>
);
^ The above works when either isGlobal
or scope
are set, but remember that to access scoped stores you need a wrapping container anyway
from react-sweet-state.
Thanks for the reply Alberto, is was able to achieve my need without getting into questionable pattern using a null selector with actions in a previous point in the tree, where I already had access to the state I was going to need downwards.
The isGlobal Container was not needed.
BTW, I'm using NextJs and for some reason react-sweet-state is not playing nicely with its Hot Reload Module, I have to restart the server almost every time a change is made in sweet-state files. Not sure if there is a conflict in my project, but if this does happen might be nice to point out in docs so we are not chasing "intermittent bugs".
from react-sweet-state.
Cool.
Regarding NextJs would you mind opening a separate issue? I don't use it so it might take some time before have time to investigate, but can help letting other people know if they experience inconsistencies. Thanks
from react-sweet-state.
Related Issues (20)
- The useHook with selector does not trigger rendering properly HOT 3
- [Documentation request] - Example with Next.js SSR
- Possibly incorrect type definition for `ActionThunk` HOT 2
- Incorrect selector behaviour with promises
- Input caret will jump to end of string when using store HOT 4
- better type/name for dispatched actions HOT 1
- Persistent global scoped stores HOT 2
- "Families" containers HOT 7
- Ability to pass callback function during store creation for store initialisation and updates HOT 3
- Non global states HOT 4
- Container cleanup occurs after remounting, clearing state set by onInit HOT 1
- Hook mount/unmount time depends at number of hooks on page HOT 1
- New major HOT 2
- Move from .js to .ts HOT 1
- Uncaught TypeError: Cannot read properties of null (reading 'unsubscribe') HOT 6
- Unstable scheduling behavior
- Unexpected change in behaviour beween React 17 and 18 HOT 14
- Discussion: Should an error in onUpdate trigger the container's error boundary? HOT 3
- Using container on update hook causes React 16 errors to be printed HOT 5
- createActions helper HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-sweet-state.