<h3 dir="auto">Website or app</h3>
<p dir="auto">Please checkout the linked branch not <code class="notranslate">main</code><br>
<a href="https://github.com/eps1lon/react-devtools-repro-no-matching-node/tree/repro/elements-leaking">https://github.com/eps1lon/react-devtools-repro-no-matching-node/tree/repro/elements-leaking</a><br>
Repro steps and screen recording included in the repro</p>
<h3 dir="auto">Repro steps</h3>
<ol dir="auto">
<li>Clone repro</li>
<li>yarn</li>
<li>yarn start</li>
<li>Open app page</li>
<li>open devtools</li>
<li>Uncomment the <code class="notranslate">useEffect</code> block i.e. add an effect</li>
<li>inspect <code class="notranslate">Component</code> element</li>
<li>comment <code class="notranslate">useEffect</code> block i.e. remove the effect</li>
<li>Repeat comment/uncomment to see that children grow indefinitely</li>
</ol>
<h3 dir="auto">How often does this bug happen?</h3>
<p dir="auto">Every time</p>
<h3 dir="auto">DevTools package (automated)</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">DevTools version (automated)</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Error message (automated)</h3>
<p dir="auto">Could not inspect element with id 4</p>
<h3 dir="auto">Error call stack (automated)</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Error component stack (automated)</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">GitHub query string (automated)</h3>
<p dir="auto"><em>No response</em></p>
<p dir="auto">Might be a duplicate of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="876702858" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/21436" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/21436/hovercard?comment_id=835406075&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/21436#issuecomment-835406075">#21436 (comment)</a> since the repro steps are the same. But depending on what the effect is doing, the behavior is different.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
how about an answer....</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">40,0000 foot high level of frustration not relieved by reading over 100 different articles, doc articles, 4 pluralsight courses, stack overflow answers and many other useless leads.</p>
<p dir="auto">**code provided</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class firstComponent extends Component{
    render(){
        return(
            &lt;div&gt;
                &lt;h1&gt;my first component&lt;/h1&gt;
                &lt;Button /&gt;
            &lt;/div&gt;
        )
    }
}
export default firstComponent;

class Button extends Component{
    constructor(props){
        super(props);
        console.log('handleClick');
       this.state = {counter: 25};

    }
    handleClick(e){
        e.preventDefault();
        console.log('Button:handleClick');
        this.state = {counter: 10};         THIS DOESN'T WORK '
    }
    render(){
        // console.log(this.state.counter);
        var counter = 15;
        return (
            &lt;div&gt;
            &lt;h1&gt;Button: component&lt;/h1&gt;
            &lt;h1&gt;{this.props.counter}&lt;/h1&gt;
            &lt;button onClick={this.handleClick}&gt;{this.state.counter}&lt;/button&gt; this crap doesn't work either.'

            &lt;h1&gt;{this.props.counter}&lt;/h1&gt;
            &lt;/div&gt;
        )
    }
}

export default Button;"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-s1">firstComponent</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span><span class="pl-kos">{</span>
    <span class="pl-en">render</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>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>my first component<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Button</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</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-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">firstComponent</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">Button</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span><span class="pl-kos">{</span>
    <span class="pl-en">constructor</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-smi">super</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'handleClick'</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">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">counter</span>: <span class="pl-c1">25</span><span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-kos">}</span>
    <span class="pl-en">handleClick</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
        <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-en">preventDefault</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'Button:handleClick'</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">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">counter</span>: <span class="pl-c1">10</span><span class="pl-kos">}</span><span class="pl-kos">;</span>         <span class="pl-c1">THIS</span> <span class="pl-c1">DOESN</span><span class="pl-s">'T WORK '</span>
    <span class="pl-kos">}</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
        <span class="pl-c">// console.log(this.state.counter);</span>
        <span class="pl-k">var</span> <span class="pl-s1">counter</span> <span class="pl-c1">=</span> <span class="pl-c1">15</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Button: component<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">counter</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleClick</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">counter</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span> this crap doesn't work either.'

            <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">counter</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</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-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">Button</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Something that works as good a plain HTML (maybe that's what I should be using.<br>
**React v15, chrome browser, edge, FF / Windows 10</p>
<p dir="auto">This works in previous versions of React using the var foo = React.createClass({})** but have not been able to get to work with the new class version and I can't find ANY examples that work and have been trying for well over a week. I need to start migrating some react modules from v0.13 to v15 but this is telling me I should give up and move on...</p>
<p dir="auto">React may be fast but it's a PITA to start with and to update your knowledge and the glorified DOCS don't help</p>