# Transferring Properties in React | kirupa.com

**URL:** <https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203>\
**Category:** programming\
**Created:** [March 20, 2017, 1:51am UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203 "2017-03-20T01:51:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 20, 2017, 1:51am UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/1 "2017-03-20T01:51:32Z")

</div>

There is a frustrating side to working with properties. We kinda saw this side in the [previous tutorial](http://www.kirupa.comcreating_complex_components.htm). 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](http://www.kirupa.com/react/transferring_properties.htm)

---

<div class="post-metadata">

**Author:** ![gregypooh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gregypooh/32/8366_2.png) [@gregypooh](https://forum.kirupa.com/u/gregypooh)\
**Post date:** [April 12, 2017, 6:21am UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/2 "2017-04-12T06:21:36Z")

</div>

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?

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/66583f1b1b0fec898884bc6b99ee1aa40fb5cd5a.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 12, 2017, 3:27pm UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/3 "2017-04-12T15:27:29Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![gregypooh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gregypooh/32/8366_2.png) [@gregypooh](https://forum.kirupa.com/u/gregypooh)\
**Post date:** [April 12, 2017, 5:00pm UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/4 "2017-04-12T17:00:52Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 12, 2017, 8:08pm UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/5 "2017-04-12T20:08:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dcorbacho](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/dcorbacho/32/8523_2.png) [@dcorbacho](https://forum.kirupa.com/u/dcorbacho)\
**Post date:** [June 24, 2017, 12:23pm UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/6 "2017-06-24T12:23:34Z")

</div>

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://blog.shakacode.com/react-purecomponent-pitfalls-d057882f4b6e)  
[https://stackoverflow.com/questions/41192410/will-using-the-react-props-spread-operator-significantly-slow-up-my-application](https://stackoverflow.com/questions/41192410/will-using-the-react-props-spread-operator-significantly-slow-up-my-application)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 24, 2017, 9:00pm UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/7 "2017-06-24T21:00:51Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Tiyberius](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tiyberius/32/8888_2.png) [@Tiyberius](https://forum.kirupa.com/u/Tiyberius)\
**Post date:** [December 25, 2017, 3:02am UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/8 "2017-12-25T03:02:32Z")

</div>

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](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 🥇

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 26, 2017, 3:23am UTC](https://forum.kirupa.com/t/transferring-properties-in-react-kirupa-com/636203/9 "2017-12-26T03:23:59Z")

</div>

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 🙂

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