Reputation: 169
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?
Upvotes: 11
Views: 2674
Reputation: 5481
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.
Upvotes: 7
Reputation: 26878
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.
Upvotes: 0