<p dir="auto">Which lifecycle methods can I define on a modern ES6-class-style React component? The same as for a classic component spec?  I checked the docs but I can't find much yet on the ES6 classes. Am I missing something?</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug (though the React code is working as intended)</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When hydrating from server-rendered DOM, if <a href="https://github.com/facebook/react/blob/v16.2.0/packages/react-reconciler/src/ReactFiberHydrationContext.js#L229">react-reconciler encounters an unexpected node</a> it will peek ahead to the next DOM node and test if it is the expected node. If so, react-reconciler will delete the unexpected node and continue on by using the second node to hydrate. If the second node does not match the instance then the reconciler gives up and begins inserting DOM nodes without trying to reconcile.</p>
<p dir="auto">In our case, we are server-side rendering the entire #document server-side and re-hydrating at that level. Some 3rd party analytics scripts are injected at the top of  before the hydrate call happens, causing the entire application to be injected into the body instead of reconciled with the existing nodes.</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 via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template for React 16: <a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>, template for React 15: <a href="https://jsfiddle.net/hmbg7e9w/" rel="nofollow">https://jsfiddle.net/hmbg7e9w/</a>).</strong><br>
I can force this to happen in our app by injecting two (or more) empty <code class="notranslate">script</code> tags at the top of . I've not been able to reproduce via jsfiddle; unsure what the exact combination of flags are to force this specific code path.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="document.body.insertBefore(document.createElement('script'), document.body.children[0]);
document.body.insertBefore(document.createElement('script'), document.body.children[0]);"><pre class="notranslate"><code class="notranslate">document.body.insertBefore(document.createElement('script'), document.body.children[0]);
document.body.insertBefore(document.createElement('script'), document.body.children[0]);
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Ideally the reconciler would look at all of the sibling nodes to find the matching element.</p>
<p dir="auto">A comment in the code at the relevant location says</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// If we can't hydrate this instance let's try the next one.
// We use this as a heuristic. It's based on intuition and not data so it
// might be flawed or unnecessary."><pre class="notranslate"><code class="notranslate">// If we can't hydrate this instance let's try the next one.
// We use this as a heuristic. It's based on intuition and not data so it
// might be flawed or unnecessary.
</code></pre></div>
<p dir="auto">I hacked together a change to prove out inspecting all sibling elements and that seems to be working with no unintended consequences. I modified</p>
<p dir="auto"><code class="notranslate">nextInstance = getNextHydratableSibling(nextInstance);</code><br>
to be<br>
<code class="notranslate">while (nextInstance = getNextHydratableSibling(nextInstance), nextInstance &amp;&amp; !canHydrate(fiber, nextInstance)) {};</code></p>
<p dir="auto">So nextInstance will either be the hydratable sibling or it will be null.</p>
<p dir="auto">Using <code class="notranslate">performance.now()</code> on my Mac Book Pro, I do not observe this O(1) -&gt; O(n) change to be measurable in my situation.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="with matching DOM: 118-144ms
with mismatched DOM: 116-172ms
mismatchedDOM &amp; updated function: 116-163ms"><pre class="notranslate"><code class="notranslate">with matching DOM: 118-144ms
with mismatched DOM: 116-172ms
mismatchedDOM &amp; updated function: 116-163ms
</code></pre></div>
<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>
This was introduced with React 16s new hydration approach. (I'll take this over the Invariant 42 full-stop error; thanks for building the new approach!).</p>