What is the behavior of uncaught errors in react 16?

In React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. The reason behind this decision is that it is worse to leave corrupted UI in place than to completely remove it. For example, it is worse for a payments app to display a wrong amount than to render nothing.

What is the proper placement for error boundaries?

The granularity of error boundaries usage is up to the developer based on project needs. You can follow either of these approaches,

1. You can wrap top-level route components to display a generic error message for the entire application.

2. You can also wrap individual components in an error boundary to protect them from crashing the rest of the application.

What is the benefit of component stack trace from error boundary?

Apart from error messages and javascript stack, React16 will display the component stack trace with file names and line numbers using error boundary concept.

For example, BuggyCounter component displays the component stack trace as below,

What is the required method to be defined for a class component?

The render() method is the only required method in a class component. i.e, All methods other than render method are optional for a class component.

What are the possible return types of render method?

Below are the list of following types used and return from render method,

1. React elements: Elements that instruct React to render a DOM node. It includes html elements such as <div/> and user defined elements.

2. Arrays and fragments: Return multiple elements to render as Arrays and Fragments to wrap multiple elements

3. Portals: Render children into a different DOM subtree.

4. String and numbers: Render both Strings and Numbers as text nodes in the DOM

5. Booleans or null: Doesn't render anything but these types are used to conditionally render content.

What is the main purpose of constructor?

The constructor is mainly used for two purposes,

1. To initialize local state by assigning object to this.state
2. For binding event handler methods to the instance For example, the below code covers both the above cases,

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Is it mandatory to define constructor for React component?

No, it is not mandatory. i.e, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

What are default props?

The defaultProps are defined as a property on the component class to set the default props for the class. This is used for undefined props, but not for null props.

For example, let us create color default prop for the button component,

class MyButton extends React.Component {
  // ...
}

MyButton.defaultProps = {
  color: 'red'
};

If props.color is not provided then it will set the default value to 'red'. i.e, Whenever you try to access the color prop it uses default value

render() {
   return <MyButton /> ; // props.color will be set to red
 }

Note: If you provide null value then it remains null value.

Why should not call setState in componentWillUnmount?

You should not call setState() in componentWillUnmount() because once a component instance is unmounted, it will never be mounted again.

What is the purpose of getDerivedStateFromError?

This lifecycle method is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.

The signature of the lifecycle method is as follows,

static getDerivedStateFromError(error)

Let us take error boundary use case with the above lifecycle method for demonstration purpose,

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

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

    return this.props.children;
  }
}