4 ms·
> To me, useState with a complex object is an antipattern. I'd much rather use multiple useState invocations. The issue with that is that sometimes you need to
by maest 5y ago
> To me, useState with a complex object is an antipattern. I'd much rather use multiple useState invocations.
The issue with that is that sometimes you need to make transactional changes to your state (i.e. either update 3 variables together, or not update them).
That gives you 2 options:
1. bundle the state up in a complex single object with useState
2. extend the space state of your app to allow for mid-transaction rendering (i.e. only 2 of the vars have updated and the 3rd has not).
#2 feels a lot harder to me, tbh (although I do strongly dislike #1. and would like an alternative.)
- Jenk 5y agoThat scenario to me is a sign of a greater workflow than what should be in the view. Some other model should be handling that transactionality, not the view itself.
- tshaddox 5y agoAren’t multiple setState calls in the same tick likely to be batched and only result in one new render with all state values updated?
- steve_adams_86 5y agoBefore React 18, it was possible to get multiple renders depending on where your calls to set state occurred. Inside different event loops, async calls, etc would lead to multiple renders even if they all settled within a few ms of each other and before a render occurred. The batching algorithm wasn’t aware of each asynchronous context. In React 18 I believe this is mostly fixed.
- steve_adams_86 5y agoIn React 18 I believe this is handled via batching of state updates. If you update various pieces of state within a component before it has the chance to render, it will update all changes at once and render once. There are exceptions I’ve forgotten but generally it solves this problem well.
- jakelazaroff 5y agoTo me, the core problem with using two hooks is that there's no signal to other developers that the two pieces of state must be updated atomically. Sequential setState calls might be batched, but there's nothing preventing someone from only calling one of them.
- steve_adams_86 5y agoI'm not sure I understand. Which two hooks would be called in this case? In the original example I'm seeing where there's anything atomic involved across multiple hooks. Are you referring to the usePromise and useAsyncExtendedState? If so, it's okay to use those hooks independently. They work fine without each other, but they also work well together.
- jakelazaroff 5y agoI’m saying that if you have multiple pieces of state that must be updated atomically, it makes sense to store them in an object in one useState hook because it signals to other developers that they should be updated together. The fact that React allows you to batch the renders if you store the state in two separate hooks is unimportant.
- bayesian_horse 5y agoSounds like a niche use case inbetween the scope of useState and something like Redux.
- joshfee 5y agoThis sounds like the use case for `useReducer`