I am trying to get how to manage complex state in React, with limiting the number of render calls for components whose content has not changed.
As example:
I have simple connected to redux store container component with "items" props (which is array).
const Component = ({ items }) => (
<>{items.map(item => <ItemComponent key={item.id} {...item} />}</>
);
const mapStateToProps = state => ({
items: $$data.select.items(state),
});
const ConnectedComponent = connect(mapStateToProps)(MyComponent);
Every time any part of the complex store changes – the items prop changes also, even if items data didn't update, even if it is empty: oldProp: [] => newProp: []. And it causes rerendering. (I found it in React Dev Tools, it highlights updated components)
Should I worry about this unnecessary rerenders? What is the best way to deal with it? I already found that new React.memo hoc stops rerenderings, but is it good way ?
from React redux connect rendering optimisation
No comments:
Post a Comment