What is the good way for child to parent communication using inverse data flow in ReactJS?

Question

I was wondering something about the reverse data flow in a React app. Considering this question: data flow in react application and this article http://facebook.github.io/react/docs/thinking-in-react.html

We can see that the "normal" way to communicate from child to parent component is using callback passing through this.props.myCallback. (the StackOverflow article is a good example)

My questions are:

• I understand the concept but what if we have deeper components? We would have to pass this callback to every component between the top parent component who hold the state and the actual triggering component. And if there is 3 to 4 components between them, I would have to pass the callback using this.props in each component.
• Why not using an Event Emitter? I could send an event from the deep child component and then listen to this event in my top state parent component. This way we could avoid all the code between these two.

Please tell me what are your thoughts about this!

Answer 1

I learnt the hard way that it is a good practice to keep as much logic as possible in the highest level in the hierarchy of your components. Dan Abramov well expressed this idea in the article Smart and Dumb Components , where Smart Components are those that hold the logic, whereas Dumb Components are just meant to display.

So yes, the callback mechanism works well when you simply want to update the father's state, or you want the father to do an action whose logic you do not want to belong to the child.

When you have anything slightly more complicated than this I would suggest you go with a Flux-ish architecture of your taste. Flux indeed uses node's EventEmitter to communicate with the components.