Are there any disadvantages to just passing the entire state to components from redux?

Question

I'm using the ES6(?) decorators with Redux and React. In many examples I see people explicitly assiging which store items get passed as props. In some examples I see people using spread attributes to just pass everything through like:

@connect((store) => {
  return {
    ...store
  }
})
export default class SomeComponent extends React.Component {
...

Is it okay to just do this for every component, or should you cherry pick the props specific for that component?

Answer 1

There is a huge performance detriment, as on every action dispatch react-redux runs every connected component's mapStateToProps, and then shallowly compares the old props to the new props. If there's any change the wrapped component will re-render. Basically if you pass in the entire store, every connected component will re-render on every action dispatched.

Answer 2

I went thru both paradigms of redux development.

• Every component gets all the actions, and all of the state.
• Only the container/parent/base pages get all the actions/state
  • Gives the children only what it needs

What I found. Yes, there is a performance hit because if every component has every state property, imagine you change one state value - every single component gets that update - whether it needs it or not. Constant updates.

All night you are woken up:


Imagine your dog wakes up at 3:30am every night to go outside to pee.
Imagine your neighbor wakes up at 4am for work.
Imagine your other neighbor wakes up at 4:30 am for work.
Imagine your family wakes up at 5:15 am for work.

And you need to get up at 6:00am work.

In all of those scenarios, you are woken up. Over time, how effective are you gonna be at work? You are gonna be tired, sluggish etc...

Now, imagine - you CAN only ask to be woken up, when you need to be? And not all those other times, that have nothing to do with you?

That is how I think of it. So, let your child components only know about the things they care about.

So, I usually have the container page/parent - know about everything - and hand down what it needs.

Caveat - I have found, there are some cases in which a child component (for whatever reason) needs to know about nearly everything. For me, passing every single thing down to multiple levels - also impacts those children you pass along the way...

parent ---> 
     child (just care about one thing) ---> 
         child (just care about one thing)---> 
            child (I want alot of stuff)

I don't like to pass all that stuff down all those children, especially if those children higher up the ladder don't care. So, in that deepest most child, I give it everything from the get go - and not pass anything to it.

That is a little bit of a performance hit, I'll take to make the code cleaner.

But overall, don't give every component everything. Makes a huge performance difference overtime, and as your application grows.

Answer 3

Yes, there are. It's not as easy to read what props the component is actually using. Also, props that you aren't using in the component can change and will trigger unnecessary re-renders.