1

I have components <Parent> and <Child>, and <Parent> accesses a Redux state prop called prop1 using mapStateToProps(). <Child> needs to access prop1 as well.

What's the difference between passing it to <Child> as a prop like <Child prop1={this.props.prop1}> vs having <Child> get it via mapStateToProps()? Is one way better than the other?

gkeenley
  • 6,088
  • 8
  • 54
  • 129
  • 1
    This will probably be closed as opinion-based. But my view is that, once you've decided to keep that value in Redux (which itself is not necessarily an obvious decision), you should get it from Redux in all components which need it, rather than only fetch it in one and pass it manually down to the others. Part of the point of Redux, after all, is to avoid having to manually pass values down as props all over the place. – Robin Zigmond Nov 23 '22 at 20:54
  • If you don't want it to be possible for the parent to alter the prop before they pass it to the child, then getting it from the store is better, otherwise there is no harm in passing down props IMO. – geoffrey Nov 23 '22 at 21:14

2 Answers2

2

TLDR: Get it via mapStateToProps from Child

In this simplified example you provided I would say that the best option is to get the prop1 directly in the Child component for the sake of encapsulation. It would be easier for other developers or the future you to identify the component's dependencies when it gets revisited.

Another benefit of this approach is that it limits updates in case the prop1 changes. Only Child component will be updated in contrast to the other approach where Parent will be updated along with all of it's children.

However there is a use-case where prop drilling from Parent may be preferred. If Child component is a reusable one and you don't want to bind it with a specific redux state slice. This way you can keep it unaware of redux and reuse it in another parent component with some other value as prop.

fgkolf
  • 910
  • 3
  • 15
0

If the value is already stored in redux you should use redux. The main drawback of using redux is the sheer amount of boiler plate. However, you already crossed that line in this case.

André
  • 1,602
  • 2
  • 12
  • 26