Thursday, 20 June 2019

React redux connect rendering optimisation

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