CODEWITHSUNDEEP
javascriptreactjs
Yeah
Yeah

Reputation: 167

How do react components render one at a time and not nest in their parent's render?

If you were to log the start and end of each component's render they would start and finish independently of the children that they render. How does the child not render inside the beginning and end of the parent's render?

Thanks!

Upvotes: 0

Views: 117

Answers (2)

aug
aug

Reputation: 11714

It probably would be good to read about Reconciliation in React and also there's a good video about how React renders in Fiber which helps visualize what React is thinking about when it is rerendering.

Parents aren't responsible for each components individual render function -- it just knows to a diff against the virtual DOM and then trigger the lifecycle methods and then a rerender for its own children if necessary. To clarify hooking into life cycle methods can also change the behavior of when a parent or child might render so when you ask How does something not render, it could be because it was specified not to.

For children components, the parents simply repass the props in and trigger the process again but it doesn't necessarily destroy and rebuild the instance (this depends on if there are different types surrounding the children components).

Hope this helps.

Upvotes: 1

jered
jered

Reputation: 11571

How would the parent know what children to render, until it renders itself? Think about it. The children are a result of the parent component rendering. Until the parent renders, how on earth does React, the universe, or God know what child elements to render? So obviously, the parent renders before its children, and when there is a child to render, it runs its own render function, and if that child has children, it renders those children, and so on down the line. React Apps are basically a tree structure, with a root "node" that renders first, and then any children, and then any children of those children, etc.

Also, there is no "end" to the render function. The "end" is the return of a React component to render, and there can be no code run in a render function after that return. The "end" of the render is when every single parent and child has run their render functions and returned a component.

Upvotes: 1

Related Questions