My inspiration for this blog post came from this video where Dan Abramov walks through the source code to react-redux

As frontend web developers, it's not uncommon that we follow well-specified patterns - often blindly. The frontend landscape is changing rapidly, and sometimes there isn't time to investigate why we use a specific pattern; we just know we should.

One widely used pattern in react-redux applications looks like this

connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

I'll assume you know how to implement this pattern, but why do we use it and how does it work under the hood?

React has taken the web development community by a storm, and with it functional programming concepts have embedded themselves in the mainstream. One common statement you will often read is that all state in React should be immutable, and this practice is justified as necessary for performance reasons. This statement is entirely true, but it only tells half the truth. Immutability alone will not yield any performance gains in React (it'll actually make things slower).