Some Useful Feature of React JS - Suspence, Helmet and Portal

In React, Suspense, Helmet, and Portal are three important features that help with different aspects of application development. Here’s an overview of each:

1. Suspense

Suspense is a component that lets you "wait" for some code to load (usually data or components) before rendering its child components. It helps manage loading states in a more user-friendly way.

Use Case: It’s commonly used in conjunction with React.lazy() for code-splitting, allowing you to load components only when they are needed.

Example:

import React, { Suspense, lazy } from 'react';

// Dynamically import the component

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {

    return (

        <div>

            <h1>My App</h1>

            <Suspense fallback={<div>Loading...</div>}>

                <LazyComponent />

            </Suspense>

        </div>

    );

};

export default App;

 

2. Helmet

react-helmet is a library used for managing changes to the document head in a React application. It allows you to set the title, meta tags, and other head elements dynamically.

Use Case: It’s useful for SEO, social media sharing, and managing page metadata.

Example:

import React from 'react';

import { Helmet } from 'react-helmet';

const MyComponent = () => {

    return (

        <div>

            <Helmet>

                <title>My Page Title</title>

                <meta name="description" content="This is my page description." />

                <link rel="canonical" href="http://mysite.com/example" />

            </Helmet>

            <h1>Hello, World!</h1>

        </div>

    );

};

export default MyComponent;

 

3. Portal

A Portal in React allows you to render a child component into a different part of the DOM tree, outside of its parent component hierarchy. This is particularly useful for modals, tooltips, and overlays.

Use Case: It’s commonly used when you want to escape the overflow or positioning constraints of a parent container.

Example:

import React from 'react';

import ReactDOM from 'react-dom';

const Modal = ({ isOpen, children }) => {

    if (!isOpen) return null;

    return ReactDOM.createPortal(

        <div className="modal">

            <div className="modal-content">

                <button className="close-button" onClick={() => isOpen(false)}>Close</button>

                {children}

            </div>

        </div>,

        document.getElementById('modal-root') // A div with id "modal-root" should exist in your HTML

    );

};

 

const App = () => {

    const [isOpen, setIsOpen] = React.useState(false);

    return (

        <div>

            <h1>My App</h1>

            <button onClick={() => setIsOpen(true)}>Open Modal</button>

            <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>

                <h2>This is a Modal!</h2>

            </Modal>

        </div>

    );

};

export default App;

 

Summary

• Suspense: Handles loading states for components and data fetching, particularly useful for code-splitting with React.lazy().
  
  
• Helmet: Manages the document head for dynamic titles and meta tags, enhancing SEO and user experience.
  
  
• Portal: Renders children into a different part of the DOM tree, useful for components like modals and tooltips.
  
  

These features enhance the capability of React applications by providing better handling of asynchronous loading, SEO management, and DOM manipulation.