Comments (5)
one solution is to memorize the component with the optionValue. My initial though was that i could get the same instance of the methods back?
// memoize this component
function MyButtonRowWithOptionKey ({optionKey}: {optionKey: string}) {
const {optionValue, specificFlipOption} = useFlipOptionsWithKey(optionKey);
return useMemo(() => {
console.log(`Rendering MyButtonRowWithOptionKey ${optionKey}`)
return (
<View>
<Text>{optionKey+": "+optionValue}</Text>
<TouchableOpacity style={{
backgroundColor: 'orange',
padding: 10,
margin: 10,
}} onPress={specificFlipOption}>
<Text>Flip {optionKey}</Text>
</TouchableOpacity>
</View>
)
}, [optionValue])
}
from easy-peasy.
Hey @NilsBaumgartner1994 !
I don't get it, why in this simple example the components MyButtonRowWithOptionKey are rerendering both, despite i only change a value in one?
Both components are re-rendered in both cases because both are dependent on the options
object in the store.
When updateOptions
is called, the options
reference is updated (to the new object), which in turn triggers a rerender for all components depending on options
from the store.
If you want to "fix" this in the store, you'd have to split the options
into separate values in the store & update these individually.
Hope that clarifies things.
one solution is to memorize the component with the optionValue
Given that the options
values are primitives, your example should prevent view-rerenders for unchanged options
values.
from easy-peasy.
I found where the problem was:
The rerender was caused due to the option reference being updated. So as you said it triggers a rerender for all components depending on that.
If you want to "fix" this in the store, you'd have to split the options into separate values in the store & update these individually.
My solution would be this. Seems a bit easier in my optionion?
// BAD
const options = useStoreState((state) => state.options);
const optionValue = options?.[optionKey];
// Correct
const optionValue = useStoreState((state) => state.options?.[optionKey]);
from easy-peasy.
@jmyrland is my solution overlooking something?
from easy-peasy.
I found where the problem was:
The rerender was caused due to the option reference being updated. So as you said it triggers a rerender for all components depending on that.
If you want to "fix" this in the store, you'd have to split the options into separate values in the store & update these individually.
My solution would be this. Seems a bit easier in my optionion?
// BAD const options = useStoreState((state) => state.options); const optionValue = options?.[optionKey]; // Correct const optionValue = useStoreState((state) => state.options?.[optionKey]);
I think that should work. It should only rerender when the options[optionKey]
-state changes 👍
My only concern is; what happens if options?.[optionKey]
resolves to undefined
. If you have tested this, and it works - you should be fine 👌
from easy-peasy.
Related Issues (20)
- undefined store on "contextmenu" event HOT 2
- Cannot assign other store action to property HOT 4
- RangeError "Maximum call stack size exceeded" on clone function HOT 3
- Unable to alias `Unstable_EffectOn` type
- Inform users about immer workings for complex objects HOT 4
- Disable merge in easy peasy HOT 2
- HMR using Vite: module is not defined HOT 1
- Persist state with boolean false as default value? HOT 1
- Updating State HOT 2
- Broken in NextJS 13 with React 18 HOT 6
- Performance: Modifying data is too time-consuming HOT 3
- Property 'user' does not exist on type 'StateMapper<FilterActionTypes<{}>>' HOT 2
- Support for collection of nested models HOT 5
- Is it still maintained? HOT 2
- Next.js 13 example with Experimental App Directory HOT 3
- TypeError: proxy handler is null HOT 3
- Computed props which depend on computed props that consume store state don't update as expected
- Inquiry Regarding Bundle Size in easy-peasy v6.0.4 HOT 1
- RIP
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 easy-peasy.