A Redux performance obsession: mapping state to props

Don’t let performance suffer at the hands of mapStateToProps

React Redux does a lot to optimise an application’s performance, but the mapStateToProps function can leave much of this effort wasted, if not written with care.

connect(mapStateToProps)(WrappedComponent)

These functions play a seemingly simple role: tell connect which data to take from the store and to reshape that data if necessary, before it gets passed on as props to the wrapped component.

However, there are some important facts about mapStateToProps that are often forgotten:

1. They run every single time the store changes, or in other words, they run a lot 🏃‍♂️
2. They have a huge responsibility: to determine if a component should re-render ♻️

Ignoring these facts can lead to performance issues in an application, but they are issues that can be easily solved with any of the solutions outlined here.