Does React Redux recreate the entire Virtual DOM each time an action is dispatched from the Store?

Question

Isn't that a very expensive affair?

For example, if I clicked a button that toggles something... Does React need to recreate the entire Virtual DOM just for that one action and diff it as well?

Answer 1

When you call React Redux's connect on components, you're wrapping them in a component called Connect. The component reads the store from the <Provider>'s context. When you dispatch an action, the Redux store gets updated, which causes all connect-ed components to get new props (those defined in mapStateToProps during a store update.

If a connected component subscribes to a store field but the action doesn't change that field's value, it wouldn't re-render.

The rest follows regular React rendering rules. If a connected component's HOC wrapper subscribes to a store field that has changed, it will update and cause the connected component to re-render as well. You could implement shouldComponentUpdate in the connected component if you don't want it to re-render.

References:

• https://github.com/reduxjs/react-redux/blob/master/src/components/Provider.js
• https://github.com/reduxjs/react-redux/blob/master/src/components/connectAdvanced.js