<p dir="auto">hi guys,<br>
i have a component by which count character, word a <code class="notranslate">div</code>.<br>
now, when component will be render i got a lot duplicate warning in chrome console tool =&gt; <code class="notranslate">Warning: setState(...): Cannot update during an existing state transition</code><br>
what can i do for fix this problem?<br>
finally, i want return states.<br>
thanks</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import ReactDOM from 'react-dom';
import Countable from 'countable';


class Statics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            paragraphs: 0,
            sentences: 0,
            words: 0,
            characters: 0,
            all: 0
        };
        this.Counter_Callback = this.Counter_Callback.bind(this);
    }
    Counter_Callback(counter) {
        this.setState({
            paragraphs: counter.paragraph,
            sentences: counter.sentences,
            words: counter.words,
            characters: counter.characters,
            all: counter.all
        });
    }
    render() {
        var area = document.getElementById('editor');
        Countable.live(area, this.Counter_Callback);
        return (
            &lt;div&gt;
                &lt;div id=&quot;Word_Counter&quot;&gt;
                    {this.state.words} Words
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
}

ReactDOM.render(&lt;Statics/&gt;, document.getElementById('footer-statics'));"><pre class="notranslate"><code class="notranslate">import React from 'react';
import ReactDOM from 'react-dom';
import Countable from 'countable';


class Statics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            paragraphs: 0,
            sentences: 0,
            words: 0,
            characters: 0,
            all: 0
        };
        this.Counter_Callback = this.Counter_Callback.bind(this);
    }
    Counter_Callback(counter) {
        this.setState({
            paragraphs: counter.paragraph,
            sentences: counter.sentences,
            words: counter.words,
            characters: counter.characters,
            all: counter.all
        });
    }
    render() {
        var area = document.getElementById('editor');
        Countable.live(area, this.Counter_Callback);
        return (
            &lt;div&gt;
                &lt;div id="Word_Counter"&gt;
                    {this.state.words} Words
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
}

ReactDOM.render(&lt;Statics/&gt;, document.getElementById('footer-statics'));
</code></pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
No</p>
<p dir="auto">I'm trying to build a custom renderer for react using <code class="notranslate">react-reconciler</code>. Most of the documentation and examples I've been able to find support rendering to a target once, but not re-rendering. But this is what I've been able to discover and am looking for more info on.</p>
<p dir="auto"><code class="notranslate">prepareUpdate</code> allows you to generate a diff of the old props and new props. The examples I've found say this should return an array but I'm not sure what the items in this array should look like. So for now I'm just returning true from this method.</p>
<p dir="auto"><code class="notranslate">commitUpdate</code> is run after <code class="notranslate">prepareUpdate</code> with old and new props, after which I can call the instance to tell it to update itself based on those props. But most examples I've found do not rely on the <code class="notranslate">children</code> from props and rather rely on <code class="notranslate">children</code> to come through methods such as <code class="notranslate">appendChild</code>/<code class="notranslate">removeChild</code>. It appears that when <code class="notranslate">commitUpdate</code> is run, none of the various <code class="notranslate">*Child</code> methods are called leading the <code class="notranslate">newProps</code> in <code class="notranslate">commitUpdate</code> to not reflect the children that are being tracked inside of the class. In this case I'm curious if perhaps I'm missing a <code class="notranslate">*Child</code> method in my implementation that is necessary but I don't know exists.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="appendChild(child) {
  this.children.push(child)
}

commitUpdate (oldProps, newProps) {
  // this.children != newProps.children
}"><pre class="notranslate"><code class="notranslate">appendChild(child) {
  this.children.push(child)
}

commitUpdate (oldProps, newProps) {
  // this.children != newProps.children
}
</code></pre></div>
<p dir="auto">I've also noticed that in order for <code class="notranslate">commitUpdate</code> to be called you must also pass in <code class="notranslate">supportsMutation</code>. Is this the correct property to get this working?</p>
<p dir="auto">In some examples I see that projects also have a <code class="notranslate">mutation</code> object in their host config that includes essentially copies of the <code class="notranslate">*Child</code> and <code class="notranslate">commitUpdate</code> methods from the host config but when I try to do this in my renderer, those methods never seem to be called.</p>
<p dir="auto">I'm also curious what the correct paradigm for attaching the underlying instances to one another. Currently, each of my elements has a render method that will call the render method of all of it's children and then add those children as sub views to the instance. But in cases where children might change, if I called render again I would end up with duplicate children in the parent. I've seen some examples where the elements attach themselves to their parents, rather than rendering all children and attaching the children to itself, which seems like it would resolve this issue, but this brings up another question.</p>
<p dir="auto">For a custom element, when is the correct time to add/remove children from the underlying instance? Most examples I've seen use <code class="notranslate">*Child</code> methods to keep track of the children internally and then have a method that renders all children and adds them as sub views. But there is a question in my mind as to whether or not the <code class="notranslate">*Child</code> methods are where I should be adding the children as subviews to the instance. For example, when an instance's <code class="notranslate">appendChild</code> method is called, that's when I should add the subview as a child to the element. When <code class="notranslate">removeChild</code> is called, that is when I should remove that subview from the instance. Rather than simply using these methods to keep track of children to then render them at some other time.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="appendChild(child) {
  this.view.addSubview(child)
}
removeChild(child) {
  this.view.removeSubview(child)
}"><pre class="notranslate"><code class="notranslate">appendChild(child) {
  this.view.addSubview(child)
}
removeChild(child) {
  this.view.removeSubview(child)
}
</code></pre></div>
<p dir="auto">Rather than</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="children = new Set()
appendChild(child) {
  this.children.add(child)
}
removeChild(child) {
  this.children.delete(child)
}
render() {
  this.children.forEach(child =&gt; {
    this.view.addSubview(this.child.render())
  })
  return this.view
}"><pre class="notranslate"><code class="notranslate">children = new Set()
appendChild(child) {
  this.children.add(child)
}
removeChild(child) {
  this.children.delete(child)
}
render() {
  this.children.forEach(child =&gt; {
    this.view.addSubview(this.child.render())
  })
  return this.view
}
</code></pre></div>