Which renders first child or parent in reactjs

Question

i am beginner in reactjs,and trying to understand concept like what and how the parent and child renders in reactjs

from research i found that react renders the child first and then parent,but i could not able to get the valid answer how and why? and what happen if child fails to render,i guess in react 16 there is a lifecycle called componentDidCatch that handles if child fails to render,so what was there before react 16 and how we handle those scenario

please help me

Answer 1

When componentDidMount fires you can do DOM manipulation so it makes sense that parent only receives it after children are mounted. That said you can use componentWillMount which fires in the opposite direction, parents first.

If that is clear this is how you wrap error catching in React 16.x:

React 16.x Error Handling Example

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Ref: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

REACT 15 Error Handling Example

unstable_handleError() is a function for all components which is called when render or children render an error.

unstable_handleError: function(){
  this.setState({error: "oops"})
}

class Boundary extends React.Component {
      ...
      unstable_handleError() {
        logErrorSoYouCanFixTheThing()
        this.setState({error: true});
      }
      render() {
        if (this.state.error){
          return <SafeComponent/>
        } else {
          return <ComponentWithErrors/>
        }
      }
}

On mount there is no error, so it renders <ComponentWithErrors/>.

Assuming the <ComponentWithErrors/> throws an error, this component’s unstable_handleError() will be called and state will update to error: true.

When state updates, the <SafeComponent/> is instead rendered!

Answer 2

This depends on definitions of 'child' and 'render'.

Child's render function is called first when a child is nested in parent's render because a parent needs to use the result of child's render in its own render function. In case a child is children prop it's also rendered first because a parent needs to receive it as children prop.

In this case a 'child' is nested element in parent render, a child is rendered and mounted first, error boundary in Parent will be able to catch errors from Child:

class Parent extends Component {
  componentDidCatch() {}
  render = () => <div><Child/></div>;
}

const Grandparent = props => <Parent/>;

In this case a 'child' is children prop, a child is rendered first but isn't mounted because children isn't used, error boundary in Parent wouldn't be able to catch errors from Child because Child is actually rendered in Grandparent:

class Parent extends Component {
  componentDidCatch() {}
  render = () => <div/>;
}

const Grandparent = props => <Parent><Child/></Parent>;

In React 15, unstable_handleError lifecycle hook was used to create error boundary and handle errors in children. It was replaced with componentDidCatch in React 16.