<p dir="auto">Firefox specific bug</p>
<p dir="auto">Due to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="150183047" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6570" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/6570/hovercard" href="https://github.com/facebook/react/pull/6570">#6570</a> react &gt; 15.0.3 populates every element with property <code class="notranslate">is="null"</code></p>
<p dir="auto">That's caused by weird Firefox behaviour checking the args number of <code class="notranslate">document.createElement</code>.<br>
e.g.:<br>
<code class="notranslate">document.createElement('a', '')</code> =&gt; <code class="notranslate">&lt;a is=""&gt;</code><br>
<code class="notranslate">document.createElement('a', null)</code> =&gt; <code class="notranslate">&lt;a is="null"&gt;</code><br>
<code class="notranslate">document.createElement('a', undefined)</code> =&gt; <code class="notranslate">&lt;a is="undefined"&gt;</code></p>
<p dir="auto">Verified with Firefox v46.0.1, <a href="mailto:react@15.0.3-dev">react@15.0.3-dev</a> and react@15.1.0</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Looks like a <strong>bug</strong>.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I have a simple context set up to manage a global store. When implementing this context as a functional component with the useState hook, calls to my setStore function from inside a timeout are seeing old versions of the store and updating it incorrectly.</p>
<p dir="auto">Possibly a duplicate of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="374792702" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/14010" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/14010/hovercard" href="https://github.com/facebook/react/issues/14010">#14010</a> but I don't see why the value of my store should be getting saved by the closure. The closure created by the setTimeout can't see the value of store, so it shouldn't be captured.</p>
<p dir="auto"><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></p>
<p dir="auto"><a href="https://codesandbox.io/s/mnxr754oy" rel="nofollow">https://codesandbox.io/s/mnxr754oy</a></p>
<p dir="auto">Refresh the page in the sandbox and click the "Increment otherVal" button a few times. After 3 seconds, a timeout fires in ChildThree that sets myVal to 42 but doesn't touch otherVal; however, the changes made by incrementing otherVal get blown away. This doesn't happen with changes prompted by onClick events (as you can test by clicking "Set myVal to 42" on the bottom), only timeouts.</p>
<p dir="auto">The context implementation is in <code class="notranslate">store.js</code>. If you swap out the functional StoreProvider with the commented out class version, everything works as expected.</p>
<p dir="auto">It's possible that I'm doing something wrong with how my closures are being created in the functional StoreProvider but I can't see why.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The context provided function setStore should be seeing the correct copy of the state returned by the hook.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Tested in Chrome/Firefox/Edge on React 16.9.0-alpha.1</p>