<p dir="auto">Been using React (Native) for half a year now, really enjoying it! I'm no expert but have run up against what seems like a weakness in the framework that I'd like to bring up.</p>
<p dir="auto"><strong>The problem</strong></p>
<p dir="auto"><em>Sending one-off events down the chain (parent-to-child) in a way that works with the component lifecycle.</em></p>
<p dir="auto">The issue arises from the fact that props are semi-persistent values, which differs in nature from one-time events. So for example if a deep-link URL was received you want to say 'respond to this once when you're ready', not 'store this URL'. The mechanism of caching a one-time event value breaks down if the same URL is then sent again, which is a valid event case.</p>
<p dir="auto">Children have an easy and elegant way to communicate back to parents via callbacks, but there doesn't seem to be a way to do this same basic thing the other direction.</p>
<p dir="auto"><strong>Example cases</strong></p>
<ul dir="auto">
<li>A deep-link was received and an app wants to tell child pages to respond appropriately</li>
<li>A tab navigator wants to tell a child to scroll to top on secondary tap</li>
<li>A list view wants to trigger all of its list items to animate each time the page is shown</li>
</ul>
<p dir="auto">From everything I've read, the two normal ways to do this are 1)  call a method on a child directly using a ref, or 2) emit an event that children may listen for. But those ignore the component lifecycle, so the child isn't ready to receive a direct call or event yet.</p>
<p dir="auto">These also feel clunky compared to the elegance of React's architecture. But React is a one-way top-down model, so the idea of passing one-time events down the component chain seems like it would fit nicely and be a real improvement.</p>
<p dir="auto"><strong>Best workarounds we've found</strong></p>
<ul dir="auto">
<li>Add a 'trigger' state variable in the parent that is a number, and wire this to children. Children use a lifecycle method to sniff for a change to their trigger prop, and then do a known action. We've done this a bunch now to handle some of the cases listed above.</li>
<li>(really tacky) Set and then clear a prop immediately after setting it. Yuck.</li>
</ul>
<p dir="auto">Is there is some React Way to solve this common need? If so, no one on our team knows of one, and the few articles I've found on the web addressing component communication only suggest dispatching events or calling methods directly refs. Thanks for the open discussion!</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug<br>
<strong>What is the current behavior?</strong><br>
When an undefined object is assigned a property, the component in which this is done re-renders.<br>
<strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong><br>
function ashwin() {<br>
let obj = undefined;<br>
obj["hasBasket"] = true;<br>
}<br>
call this function inside a functional component. It will result in the code being rendered again before throwing an error.<br>
<a href="https://codesandbox.io/s/priceless-wing-6xh8r" rel="nofollow">https://codesandbox.io/s/priceless-wing-6xh8r</a><br>
<strong>What is the expected behavior?</strong><br>
Shouldn't render again and just throw an error<br>
<strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
React:- 16.10.2<br>
Was able to reproduce it in chrome and safari.<br>
Didn't test it in previous versions of React</p>