<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Feature</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
The <code class="notranslate">render</code> method doesn't receive <code class="notranslate">currentState</code> and <code class="notranslate">currentProps</code>.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The <code class="notranslate">render</code> method when called would receive <code class="notranslate">currentState</code> and <code class="notranslate">currentProps</code> as arguments. For instance:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="render(currentState, currentProps) {
  return ...
}"><pre class="notranslate"><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">currentState</span><span class="pl-kos">,</span> <span class="pl-s1">currentProps</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> ...
<span class="pl-kos">}</span></pre></div>
<p dir="auto">This could allow destructure the arguments to get only the needed properties, for example.</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><br>
React 16.2 (It doesn't work in any React version)</p>
<p dir="auto">React version: 17.0.1<br>
React reconciler:  0.26.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/r3f-contact-shadow-forked-iggyv?file=/src/index.js:308-745" rel="nofollow">https://codesandbox.io/s/r3f-contact-shadow-forked-iggyv?file=/src/index.js:308-745</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let log = console.log

let id = 0
function Obj(node) {
  this.id = id++
  log('constructor', this.id)
  node.addEventListener('wheel', () =&gt; log(this.id, 'wheel'), false)
}

function App(props) {
  // The object is created twice, why does react do that, it's not documented
  const [obj] = useState(() =&gt; log('new object') || new Obj(document.body))
  return &lt;div&gt;{obj.id}&lt;/div&gt;
}

ReactDOM.unstable_createRoot(document.getElementById('root')).render(&lt;App /&gt;)"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">log</span> <span class="pl-c1">=</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">log</span>

<span class="pl-k">let</span> <span class="pl-s1">id</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span>
<span class="pl-k">function</span> <span class="pl-v">Obj</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">id</span> <span class="pl-c1">=</span> <span class="pl-s1">id</span><span class="pl-c1">++</span>
  <span class="pl-s1">log</span><span class="pl-kos">(</span><span class="pl-s">'constructor'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span>
  <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'wheel'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">log</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">,</span> <span class="pl-s">'wheel'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c1">false</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-v">App</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-c">// The object is created twice, why does react do that, it's not documented</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">obj</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">log</span><span class="pl-kos">(</span><span class="pl-s">'new object'</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-k">new</span> <span class="pl-v">Obj</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">}</span>

<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">unstable_createRoot</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'root'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto">old demo</h3>
<p dir="auto"><a href="https://codesandbox.io/s/r3f-contact-shadow-forked-e44m3?file=/src/index.js" rel="nofollow">https://codesandbox.io/s/r3f-contact-shadow-forked-e44m3?file=/src/index.js</a></p>
<p dir="auto">This demo creates a local object which is supposed to live within the components lifecycle.<br>
For some reason concurrent mode creates two versions of that object, but one is stuck in the view section.<br>
These controls aren't allowed to zoom, yet, when you give you mousewheel - it zooms. The control clearly receives the flag.</p>
<p dir="auto">This does not happen in blocking mode and previous reconcilers (for instance react 16.4.x and reconcilers pre 0.26</p>
<p dir="auto">Debugging in this is almost impossible as React swallows console.logs. Some users have found out that it indeed creates two branches of local state: <a href="https://twitter.com/belinburgh/status/1319990608010874883" rel="nofollow">https://twitter.com/belinburgh/status/1319990608010874883</a></p>
<p dir="auto">The state object (orbit-controls) has side-effects, it creates events, but that is and should be of no consequence.</p>