javascript - React redux connect rendering optimisation - Stack Overflow

admin管理员组

文章数量:1344572

I am trying to get how to manage plex state in React, with limiting the number of render calls for ponents whose content has not changed.

As example:

I have simple connected to redux store container ponent 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 plex 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 ponents)

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 ?

I am trying to get how to manage plex state in React, with limiting the number of render calls for ponents whose content has not changed.

As example:

I have simple connected to redux store container ponent 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 plex 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 ponents)

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 ?

• javascript
• reactjs
• redux

Share Improve this question Follow asked Jun 18, 2019 at 10:34 Max VorozhcovMax Vorozhcov 60211 gold badge77 silver badges2222 bronze badges 5

• A way to control the re-renders is to convert the Component to a class ponent and use shouldComponentUpdate to control when it re-renders. – Adarsh Commented Jun 18, 2019 at 10:43
• are you sure it's your ponent rerendered not wrapper created by connect() HOC? to check that just set breakpoint in your ponent's render() – skyboyer Commented Jun 20, 2019 at 12:26
• 2 Can you show how your $$data.select.items() selector is implemented? – Aditya Commented Jun 26, 2019 at 5:15
• @Aditya $$data.select.items = (state) => state.data.items; – Max Vorozhcov Commented Jun 26, 2019 at 8:17
• Selector looks ok then.. How did you confirm that rerender actually happens? It seems like @lux's answer is worth of checking. Did you try to add some console.logs to render-functions to see what's actually called? – Antti Pihlaja Commented Jun 26, 2019 at 21:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

The use of mapStateToProps in your connect() call means you want your ponent to be notified when the store changes - this will happen regardless of whether the small fragment you are interested in has changed or not. Further to this, react-redux prevents unnecessary re-renders itself by performing a shallow parison on the object returned by mapStateToProps and the previous props.

Looking at your example, scenarios like this newProp: [] would create a new array each time therefore would fail a shallow parison because the arrays are different instances.

Should I worry about this unnecessary rerenders?

React takes care not re-rendering ponents unnecessarily, so even if render is called again, as long as the props to said ponent haven't actually changed then React won't do any additional work. It's probably safe to say that, for the majority of applications, unnecessary re-renders aren't all that much of a concern.

If you feel it will affect your application or you just want to know more about ways to reduce it then there are plenty of material on the subject of performance:

• React-Redux - mapStateToProps and Performance
• React - Optimizing Performance

Most likely there is some problem with your reducer. Otherwise, you can use reselect library for defining selectors that memoize the values so re-render doesn't happen unless the value really changes.

Connecting your ponent with the store means 'Call my conmponent or ponent's render method when props changed'. Default parison is by simple equality check, which is probably false in your data.

So, in your application, it's highly possible that you created new objects or arrays even if it was not necessary. That's the first and bigger problem you have.

Even if your ponent needs to re-render, it'll execute render method but your shadow dom will be same leaving you with no expensive operations in most of the cases.

You might do below steps:
- Don't create unnecessary new object and array references. Well, this is proper and longer solution
- Implement your own equality check in with mapStateToProps. There are nice ways to optimise your selector logic but it's depending on your application's details. Better follow this post here: https://medium./practo-engineering/avoiding-re-renders-in-react-and-optimising-mapstatetoprops-with-reselect-6e199fa7bc73

Should I worry about this unnecessary rerenders?

It really depends on how big your application is. You should probably have some benchmarking, check some react performance tools.

You can use the ponent lifecycle method shouldComponentUpdate, this method gets passed the nextState and nextProps. With this, you can decide if the ponent needs updating by returning true (update) or false (don't update).

Documentation: here.

If you're using react-redux >= 6.0.0, there is a bug in React DevTools which erroneously displays highlighted re-renders.

False positives with "Highlight Updates"
https://github./facebook/react-devtools/issues/1290

What's occurring here is the wrapped ponent is getting re-rendered, but not the ponent your are using connect on.

本文标签： javascriptReact redux connect rendering optimisationStack Overflow