Issue 1:
hi guys,

i have a component by which count character, word a div.

now, when component will be render i got a lot duplicate warning in chrome console tool => Warning: setState(...): Cannot update during an existing state transition

what can i do for fix this problem?

finally, i want return states.

thanks

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 (
<div>
<div id="Word_Counter">
{this.state.words} Words
</div>
</div>
);
}
}

ReactDOM.render(<Statics/>, document.getElementById('footer-statics'));

Issue 2:
Do you want to request a feature or report a bug?

No

I'm trying to build a custom renderer for react using react-reconciler. 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.

prepareUpdate 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.

commitUpdate is run after prepareUpdate 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 children from props and rather rely on children to come through methods such as appendChild/removeChild. It appears that when commitUpdate is run, none of the various *Child methods are called leading the newProps in commitUpdate 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 *Child method in my implementation that is necessary but I don't know exists.

appendChild(child) {
this.children.push(child)
}

commitUpdate (oldProps, newProps) {
// this.children != newProps.children
}

I've also noticed that in order for commitUpdate to be called you must also pass in supportsMutation. Is this the correct property to get this working?

In some examples I see that projects also have a mutation object in their host config that includes essentially copies of the *Child and commitUpdate methods from the host config but when I try to do this in my renderer, those methods never seem to be called.

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.

For a custom element, when is the correct time to add/remove children from the underlying instance? Most examples I've seen use *Child 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 *Child methods are where I should be adding the children as subviews to the instance. For example, when an instance's appendChild method is called, that's when I should add the subview as a child to the element. When removeChild 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.

appendChild(child) {
this.view.addSubview(child)
}
removeChild(child) {
this.view.removeSubview(child)
}

Rather than

children = new Set()
appendChild(child) {
this.children.add(child)
}
removeChild(child) {
this.children.delete(child)
}
render() {
this.children.forEach(child => {
this.view.addSubview(this.child.render())
})
return this.view
}