A child component is a component included in another component’s view. The containing component is its parent. Splitting a view into children keeps one render function from having to describe the entire application. Children can themselves have children, forming a component hierarchy. section 3.8.3 section 11.0
Split a to-do view
A to-do application can render a creation form and a list as separate children. The list can render one child per to-do; each item can choose a read-mode or edit-mode child. In the initial, stateless form of this design, these components are pure functions that return virtual DOM. section 3.8.3
With stateful components, the parent–child relationship has three practical jobs:
- Pass data down: the parent supplies props to a child. When those props change, the child updates them and patches its view. section 11.1.4 section 11.3
- Send information up: a child emits a named custom event with a payload, and the parent subscribes a handler. These component events are not DOM events. section 11.2
- Keep the child instance during updates: when patching a component virtual node, reuse its existing instance, pass it the new props, and retain that instance on the new node. section 11.1.4
The surface syntax can differ. A React parent can pass a callback to a child, while a Vue child can emit an event that its parent handles. Both provide a way for the parent to respond to the child. section 11.2
