11

In my react application, lets say I have some data which is needed by both a parent component and its immediate child. The application uses redux for state management.

Now, in the child component, I can use useSelector and get the sate. But as I already have the information in the parent (in case it matters, I also got using useSelector), I simply pass props to the child like <Child info={someInfo} />. Here is Child is child component and someInfo is the sate information I got using useSelector.

My question is, should I pass props in this case or get the data using useSelector in child component. Moreover, will passing props be faster than instead of reading using useSelector and vice-versa?

ziondork
  • 169
  • 8

2 Answers2

5

Passing data through props makes the component a functional one or at least more functional. Such components are easier to maintain, test and reuse. It also makes it less dependent on future changes in the store structure. But, as it is often in our lives, there are no things as the only one right way. If your project contains many nested components, passing data all the way down through all layers would make code entangled and complicated.

In my practice, I always make UI components (lists, edits, grids, tables, etc.) as pure functional ones and use them inside business-logic-related components which are connected to store and perform side effects.

Andrej Kirejeŭ
  • 5,381
  • 2
  • 26
  • 31
  • The child is the immediate child and it has no other parent. The child is only rendered through that parent only. And the sate I am talking about is basically the logged user stored in redux store. So, in this case, passing props seems okay right, performance-wise? – ziondork Nov 20 '21 at 16:09
  • I think yes, in this case passing through props would be more performant. – Andrej Kirejeŭ Nov 20 '21 at 16:25
0

I think this is maybe a little opinion-based. Getting it from flux store means there is a hard coupling with store lib. If you pass in the prop, you can reuse the component in another, storeless, application. I've encountered this a lot with some of the components I've made and tend towards passing props in. But again, it can make sense in some cases where the component would never see reuse anyway.

zero298
  • 25,467
  • 10
  • 75
  • 100
  • 2
    I see. Someone at somewhere else mentioned that initializing useSelector hooks requires more time than accessing props. Can you please tell me your opinion on this? – ziondork Nov 20 '21 at 15:22