Is it ok to pass the entire Redux state object into a React component? Is it ok to pass the entire Redux state object into a React component? reactjs reactjs

Is it ok to pass the entire Redux state object into a React component?


I think it is a bad idea to pass the entire Redux state into a component.

Although your component today uses all the variables of the store, in the future it can be a different situation.

Imagine that in the future you or other people create many new components that handle its vars in the store. You see? The first components would receive a lot unnecessarily data.


It will only rerender on the props the component actually uses, React is smart like that. However, my personal preference is to not pass the entire object, it might be easier to code, but is a lot less verbose.

const mapStateToProps = state => ({ ...state })

In this line of code, you have no idea what the component is going to use, which makes your code way less readable, I also like to have control over the naming, that's why I prefer

const mapStateToProps = state => ({   primary,                                      secondary,  myComponentActive: active                                   })

Now, when someone is reading your code, he knows exactly what's going on.

This also gives you a better overview if you ever want to change over to React Hooks, omitting the mapStateToProps object. Even though there is still discussion whether Hooks are the future, I find it be very convenient. That is not of much use for your video, although you might discuss the possibility of changing over!