Use Connect or pass data as props to children

by

As Dan Abramov, author of redux says in this issue

Both approaches of passing props down to children or connecting them
to the store are appropriate, however having nested connect()
components is actually going to give you more performance. The
downside is they’re slightly more coupled to the application and
slightly harder to test, but that may not be a big issue.

He has also articulated a nice rule of thumb to follow on reddit

I do it this way:

  • Start by using one container and several presentational components
  • As presentational component tree grows, “middle” components start to pass too many props down
  • At this point, I wrap some leaf components into containers so that “middle” components don’t need to accept and pass down props that are
    completely unrelated to them
  • Repeat

He has even tweeted regarding this:

Try to keep your presentation components separate. Create container
components by connecting them when it’s convenient.Whenever you feel like you’re duplicating code in parent components to provide data for same kinds of children, time to extract a container.

So in simple words:

You can use connect() at any level. Doing so makes the component smart, since it knows where its props come from. A dumb component just has props, and they could come from anywhere. A smart component is coupled to redux; a dumb component is not.

UPDATE: react-redux v7 and above

The same concept applies to useSelectors too. You can receive data in a container component and pass on to your presentational components, if multiple of its children make use of the same data

If however the data used by the children is different, you can choose to use useSelector individually within the child component. This will make sure that only those components re-render which actually need to

More Related Contents:

  1. What is mapDispatchToProps?
  2. What is the best way to access redux store outside a react component?
  3. Use history.push in action creator with react-router-v4?
  4. How does connect work without mapDispatchToProps
  5. how to set initial state in redux
  6. My Redux state has changed, why doesn’t React trigger a re-render?
  7. How do I see state when logging to the console instead of Proxy object inside reducer action?
  8. axios post request to send form data
  9. React Context vs React Redux, when should I use each one? [closed]
  10. How can I persist redux state tree on refresh?
  11. Attach Authorization header for all axios requests
  12. What is the best way to redirect a page using React Router? [closed]
  13. Understanding React-Redux and mapStateToProps()
  14. React – Display loading screen while DOM is rendering?
  15. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  16. How to reset TabNavigator when user logs out (from other screen)
  17. Next.js – Error: only absolute urls are supported
  18. Stop useEffect from running on mount
  19. How do I access store state in React Redux?
  20. ReactJS lifecycle method inside a function Component
  21. Element type is invalid: expected a string (for built-in components) or a class/function
  22. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  23. Getting error Cannot read property ‘setState’ of undefined
  24. React: Parent component re-renders all children, even those that haven’t changed on state change
  25. How to give Image src dynamically in react js?
  26. Redux Presentational Components Vs Container Component
  27. How can I dispatch function in redux?
  28. Component won’t update when a redux state change occurs
  29. how to async/await redux-thunk actions?
  30. Cache busting with CRA React

Leave a Comment