ReactJS Tutorial for Beginners -14

Image for post
Image for post
Photo by Jakob Owens on Unsplash

Welcome to part-14 of the series. You can find part-13 here. We will learn about Portals and Error Boundary in this part.

Portals

Portals provide a way to render children, into a DOM node that exists outside the DOM hierarchy of the parent component. This in simple term means that, we can use portal to create a Component outside the div id=”root” in which are React components are created.

Image for post
Image for post
index.html

So, we will add a new div in the index.html with any id like below.

Image for post
Image for post
portal-root

We will first head over to App.js and show an old Component FocusInput and also a new component PortalDemo, which we are going to create next.

Image for post
Image for post
App.js

Now, we will create our PortalDemo.js in the components folder. Notice that it is almost similar to our index.js, which is consider the entry point to our React app.

Here, we are showing another component RegularComponent which we had created earlier. We are using the ReactDOM method createPortal and putting the Component in our portal-root div in the index.html.

The app in browser will show no difference, but in console we can see that the RegularComponent component is inside portal-root div. And the FocusInput component inside the root div.

Portal are mainly used to solve problems with styling. You can check a real use case in this blog.

Image for post
Image for post
Portal

Error Handling Phase Method

We will learn about Error Handling Phase Method, which will be rendered when we get some error in our component. There are two methods -

  • static getDerivedStateFromError(error)
  • componentDidCatch(error, info)

The static method getDerivedStateFromError() is used to render a fallback UI after an error is thrown.

The componentDidCatch() is used to log the error information.

Error Boundary
A class component that implements either one or both getDerivedStateFromError() or componentDidCatch(), becomes an Error Boundary.

Let’s understand it by using an example. Create a new file Villain.js inside the components folder. It is a simple class based component, which is receiving a props villainName and showing it.

But if the villainName is Batman, it throws an error.

Image for post
Image for post
Villain.js

Now, we will add the Villain component in App.js three times and each one passes a prop. The last one passed the prop Batman and our whole program crashes.

Image for post
Image for post
App.js

Now, create a file ErrorBoundary.js inside the components folder. It is using the lifecycle method static getDerivedStateFromError(error), which make the state variable hasError equal to true.

Inside the render(), we are returning the text Something Went wrong, if the state hasError is false. Or else we are returning the children.

Image for post
Image for post
ErrorBoundary.js

Now, we will move back to App.js and wrap all of the component in ErrorBoundary.

But when we see in the browser, we still see the error. This happens because the React team wants us to see error in development, but in production we will see the Error boundary text.

Image for post
Image for post
App.js

To see the same, click on the close symbol at the top right of the browser and you can see the Error message.

Image for post
Image for post
Error message

Now, we will see the second lifecycle method, componentDidCatch(). It is simply used to log the error in any logging system, which in most cases is console log. As we can see both of them are logged in the console.

Image for post
Image for post
componentDidCatch

This completes part-14 of the series. You can find part-15 here.

You can also find the code for the same in github repo, here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store