Transferring Properties in React | kirupa.com

There is a frustrating side to working with properties. We kinda saw this side in the previous tutorial. Passing properties from one component to another is nice and simple when you are dealing with only one layer of components. When you wish to send a property across multiple layers of components, things start getting complicated.


This is a companion discussion topic for the original entry at http://www.kirupa.com/react/transferring_properties.htm

I have a question about using the spread operator. Please refer to the pic below…

Let’s say there are a TON of props being passed down from the red node, but the purple node only uses a couple of them? Is there any downside to allowing the purple node to unnecessarily have access to all the other props?

There is a slight overhead of having the purple node store the additional properties, but it is almost trivial compared the other things your browser is doing with your React code. I wouldn’t worry about it, for the developer convenience (and ability to write less, error-prone code) far outweighs the negatives :slight_smile:

Okay that makes sense!

And what if the green node wants to add some props to send to the purple node? What is the best way to accomplish this in tandem with the spread operator? Do you just put the new props next to the spread operator, or is there something more clever you can do?

Just put new props alongside. I wish there was something more clever haha.

1 Like

It’s a great pattern for prototyping , but actually in advanced complex applications you might prefer not to use the spread operator, to avoid "Unnecessary re-rendering due to passing irrelevant props"
See article https://blog.shakacode.com/react-purecomponent-pitfalls-d057882f4b6e
https://stackoverflow.com/questions/41192410/will-using-the-react-props-spread-operator-significantly-slow-up-my-application

1 Like

That is a problem that needs to be addressed better! Using Redux may be overkill, but that and (other) state managers might be the only solutions we have right now :slight_smile:

I’m totally new to React development and these tutorials kick some serious ass. When I reached the end of the conclusion for this article, I thought it was the end of the series because I didnd’t see a “Next Tutorial” link. You should put a link to the next tutorial at the end of this one so that other newbs like myself can follow the full series laid out here https://www.kirupa.com/react/index.htm!

Thanks for all your efforts, I’m so glad I stumbled upon your site. No other React tutorial series compares :1st_place_medal:

Thanks for the nice comments, Tibyberius! Glad you like it. I’ve tried to add a “Next tutorial” link to most of them, but clearly I forgot a few as you have pointed out. I’ll address this shortly :slight_smile:

Also, if you ever have any requests for future tutorials, do let me know!