Lifecycle of a Component

When the component's instance is created and inserted in DOM it’s called Mounting.

When a component is being re-rendered because of change in it's state or props or re-rendering of parent it’s called Updating.

When a component is being removed from DOM it’s called Unmounting.

<aside> 💡 One can check for any further updates on https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/.

</aside>

Error Handling

When there is an error during rendering, in a lifecycle method or constructor of any child component

• static getDerivedStateFromError()
• componentDidCatch()

Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

It catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Error boundaries work like a JavaScript catch{} block, but for components.

• Only class components can be error boundaries because there is just no functional equivalent for componentDidCatch and deriveStateFromError yet.
• Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown.
• Use componentDidCatch() to log error information.

Any error caused by a component somewhere deep in the tree, will still correctly propagate to the closest error boundary.

Error boundaries do not catch errors for: