What are portals in React and when do we need them ?
In React 16.0 version, React portals were introduced. React portals come up with a way to render children components into a DOM node which typically occurs outside the DOM hierarchy of the parent component.
Before React Portals, It was very difficult to render the child component outside the hierarchy of its parent component. As, we were having one DOM element in the HTML into which we were mounting our react application, i.e., the root element of our index.html in the public folder. Basically, React mounts the App component onto the root element. It is almost a convention to have a div element with the id of root to be used as the root DOM element. Every single React component in react application falls under the root element, i.e., inside this statement.
But, React portal concept provides us the ability to break out of this dom tree and render a component onto a dom node that is not under this root element. Doing so breaks the convention where a component needs to be rendered as a new element and follows a parent-child hierarchy. Portals are commonly used in modal dialog boxes, hover cards, loaders, and popup messages. Below is the syntax of React portals.
In the syntax above, we have two parameters the first parameter is a child that can be a React element, string, or a fragment and the second one is a container which is the DOM node (or location) lying outside the DOM hierarchy of the parent component at which our portal is to be inserted.
Advantages of React Portals:
- Event Bubbling inside a portal: Although we don’t render a portal inside the parent DOM element, its behavior is still similar to a regular React component inside the application. It can access the props and state as it resides inside the DOM tree hierarchy.
- React portals can use Context API to transfer the data in components.
Importing: To create and use portals you need to import ReactDOM as shown below.
import ReactDOM from 'react-dom';
Creating React Application:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
Project Structure: It will look like the following.
Example: This is the example of portals. Here, we have created a button, whenever we click it shows a string.
Explanation: We create a state with an empty string and a function handleClick which sets the value of the state to “Welcome to gfg”. The latter gets triggered as an onClick event when we click on the button which has been rendered outside the root DOM node.
When do we need them?
We mainly need portals when a React parent component has a hidden value of overflow property(overflow: hidden) or z-index style, and we need a child component to openly come out of the current tree hierarchy.
Following are the examples when we need the react portals:
In all these cases, we’re rendering elements outside of the parent components in the DOM tree.