React Advanced React

Advanced React Concepts (Refs, Portals, Error Boundaries, HOCs)

As you become more comfortable with React, you will encounter situations where basic features such as components, props, and state are not enough. React provides several advanced concepts to solve these real-world problems while keeping applications organized and reliable.

Some of the most useful advanced concepts are:

• Refs
• Portals
• Error Boundaries
• Higher-Order Components (HOCs)

You may not use these features in every project, but understanding them will help you build more professional React applications.

Refs

A Ref (Reference) lets you directly access a DOM element or store a value without causing a component to re-render.

Normally, React updates the user interface through state. However, some tasks require direct access to an element, such as focusing an input field or playing a video.

Example

import { useRef } from "react";

function App() {
  const inputRef = useRef();

  function focusInput() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>
        Focus Input
      </button>
    </>
  );
}

Explanation

• useRef() creates a reference.
• The ref attribute connects the reference to the input.
• Clicking the button places the cursor inside the input field.

Common Uses of Refs

• Focusing input fields
• Playing videos
• Scrolling to an element
• Accessing DOM elements
• Storing values that should not trigger a re-render

Portals

Normally, React renders components inside their parent component.

Sometimes you need to display content outside of the normal component hierarchy.

This is where Portals are useful.

Portals allow React components to render somewhere else in the HTML document.

Example

import ReactDOM from "react-dom";

function Modal() {
  return ReactDOM.createPortal(
    <h2>This is a popup!</h2>,
    document.getElementById("modal-root")
  );
}

Common Uses

• Modal windows
• Popups
• Notifications
• Tooltips
• Floating menus

Portals help ensure these elements appear in the correct position on the page.

Error Boundaries

Sometimes an unexpected error occurs inside a component.

Without protection, the entire React application may stop working.

Error Boundaries help catch rendering errors and display a fallback user interface instead of crashing the whole application.

Example

class ErrorBoundary extends React.Component {
  componentDidCatch(error) {
    console.log(error);
  }

  render() {
    return this.props.children;
  }
}

Higher-Order Components (HOCs)

A Higher-Order Component (HOC) is a function that takes one component and returns a new component with additional functionality.

Instead of modifying the original component, the HOC wraps it and adds extra behavior.

Simple Example

function withGreeting(Component) {
  return function () {
    return (
      <>
        <h2>Welcome!</h2>
        <Component />
      </>
    );
  };
}

If you wrap another component with withGreeting, the greeting appears automatically before the original component.

Common Uses of HOCs

• Authentication
• Logging
• Permissions
• Analytics
• Reusable functionality

Although Hooks are now preferred for sharing logic in many situations, you may still encounter HOCs in existing React codebases.

Comparing These Concepts

Concept              Purpose
Refs                 Access DOM elements or store values without re-rendering.
Portals              Render components outside the normal component tree.
Error Boundaries     Catch rendering errors and display a fallback UI.
HOCs                 Reuse functionality by wrapping components.

Each feature solves a different problem and is useful in specific scenarios.

Best Practices

When using advanced React features:

• Use Refs only when direct DOM access is necessary.
• Use Portals for modals, popups, and floating UI elements.
• Wrap important sections with Error Boundaries to improve reliability.
• Prefer custom Hooks for sharing logic in modern React, but understand HOCs because they are still used in many existing projects.
• Keep advanced features simple and focused on solving specific problems.