React Portals: A better understanding.

Introduction

As a react developer, there are some concepts that I have not used in my projects yet. I went through the official docs to update my knowledge on react and found REACT PORTALS! I thought, such a cool name, and wondered what must be its functionality? At first glance, I didn’t understand a thing from the official docs. So I read it again and I kind of got it but I decided to implement it myself to understand it even better. I did that and got a clear picture of the concept. A good developer should always share his knowledge with the community, so here I am sharing my knowledge about react portals through this article!

When to use?

So React Portal is basically React’s way of rendering your desired component into a target dom element anywhere in your react application. yeah! a component can travel from one component using Portal! How cool is that!

But there is a big drawback to it. You can ONLY USE PORTAL if the document is loaded and your target dom node is mounted. That kind of make sense doesn’t it. In order for a portal to work, you need to know to which destination you need to travel to. So, if the target element is not found you will be getting the following error in your react application.

Error when react portal is loaded and dom node is not found in the document object
Error when react portal is loaded and dom node is not found in the document object

The same error will be shown even when you try and render a portal on app load because you are trying to render the portal before the target dom node is mounted.

With that being said, The best cases when you can react portals are for the following functionalities:

  • toast
  • tooltip
  • modal
  • autocomplete
  • lazyload

Basically you can use portals for any of the logic which is triggered by an event in your application.

How to use?

In order to use a portal in your application, the first thing you need to check is if the target node is loaded/mounted at the point when the portal is rendering.

First step: Define the Destination

//component 1 (CompOne)

export const CompOne = () => {
  return <div id="result"> </div>;
};

Second step: Open the portal to the destination dom node by defining an event

//component 2 (CompTwo)

export const CompTwo = () => {
  const [portalStatus, updatePortalStatus] = useState(false);
  return (
    <div>
      <button onClick={() => updatePortalStatus(true)}>Open Portal </button>
      {portalStatus
        ? createPortal(<PortalComp />, document.getElementById("result"))
        : ""}
    </div>
  );
};

Final step: Create the component which needs to be sent through the portal

const PortalComp = () => (
  <div>I just travelled through portal from comp 2 to com 1</div>
);

Once, all these steps are added properly, When the event is triggered, The subject will be passed from component 2 to component 1 successfully.

Full Demo

Conclusion

I hope you have gained some clarity on the concept with this article. Feel free to give me your valuable feedback/ doubts or anything else on the topic in the comment section below. Have a nice day.

41

Leave a comment

41