React Day 19: New Features (React 19)

useId Hook in React

For giving id to elements in React 19, you can use the useId hook. This hook generates a unique ID that can be used for accessibility purposes, such as linking labels to form inputs.

import React, { useId } from "react";
const MyComponent = () => {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input type="text" id={id} />
    </div>
  );
};
export default MyComponent;

Note: The useId hook is specific to React 19 and is not available in earlier versions. It is designed to generate unique IDs that are stable across server and client renders, making it ideal for use in server-side rendering scenarios.

Using useid to link multiple elements:

import React, { useId } from "react";
const MyComponent = () => {
  const nameId = useId();
  const emailId = useId();
  return (
    <div>
      <label htmlFor={nameId}>Name:</label>
      <input type="text" id={nameId} />

      <label htmlFor={emailId}>Email:</label>
      <input type="email" id={emailId} />
    </div>
  );
};
export default MyComponent;

This is ok but we can use the following way to link multiple elements with the same id:

import React, { useId } from "react";
const MyComponent = () => {
  const id = useId();

  return (
    <div>
      <label htmlFor={`${id}-name`}>Name:</label>
      <input type="text" id={`${id}-name`} />

      <label htmlFor={`${id}-email`}>Email:</label>
      <input type="email" id={`${id}-email`} />
    </div>
  );
};

export default MyComponent;

use api in React

Unlike React Hooks,use can be called within loops and conditional statements like if. Like React Hooks, the function that calls use must be a Component or Hook.It is used in

• To get content from context
  Now you can use use to get content from context.

import React, { use } from "react";

const MyContext = React.createContext();
const MyComponent = () => {
  const value = use(MyContext); // Is Equivalent to useContext(MyContext)

  return <div>{value}</div>;
};
export default MyComponent;

Also we can use it inside loops and conditionals:

import React, { use } from "react";
const MyContext = React.createContext();
const MyComponent = () => {
  const values = [1, 2, 3];
  return (
    <div>
      {values.map((value) => {
        const contextValue = use(MyContext); // Using use inside a loop
        return (
          <div key={value}>
            {contextValue} - {value}
          </div>
        );
      })}
    </div>
  );
};
export default MyComponent;

ENV Variables in React

To use ENV variables in VITE first you need to prefix the variable with VITE_. This is a security feature to ensure that only explicitly defined variables are exposed to the client-side code.

example:

VITE_API_URL=https://api.example.com

You can access these variables in your React components using import.meta.env.

For example, if you have an environment variable named VITE_API_URL, you can access it like this:

const apiUrl = import.meta.env.VITE_API_URL;
console.log(apiUrl);

Activity Component in React

In React, when you want to conditionally show or hide a component, the most common approach is to mount or unmount it based on a condition:

{isActive && <Sidebar />}

While this works, unmounting a component destroys its internal state. This behavior is not always desirable—especially for UI elements like sidebars, tabs, or modals where users expect their previous interactions to be preserved.

Problem: State Loss When a Component Unmounts

Consider the following Sidebar component that keeps track of the currently selected menu item:

import React, { useState } from "react";

const Sidebar = () => {
  const SIDEBAR = ["Home", "Profile", "Settings", "Logout"];
  const [activeItem, setActiveItem] = useState(null);

  return (
    <ul>
      {SIDEBAR.map((item, index) => (
        <li
          key={index}
          style={{
            fontWeight: activeItem === index ? "bold" : "normal",
            color: activeItem === index ? "blue" : "black",
            cursor: "pointer",
          }}
          onClick={() => setActiveItem(index)}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};

export default Sidebar;

Now, toggle this sidebar from a parent component:

const App = () => {
  const [isShowingSidebar, setIsShowingSidebar] = useState(true);

  return (
    <div>
      <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
        Toggle Sidebar
      </button>

      {isShowingSidebar && <Sidebar />}
    </div>
  );
};

What’s the Issue?

• When isShowingSidebar becomes false, the Sidebar component unmounts
• When it mounts again, its internal state (activeItem) is reset
• The previously selected menu item is lost

Traditional Solution: Lift State Up to the Parent

To preserve state, developers traditionally move the sidebar’s state to a parent component that never unmounts:

const Sidebar = ({ activeItem, setActiveItem }) => {
  const SIDEBAR = ["Home", "Profile", "Settings", "Logout"];

  return (
    <ul>
      {SIDEBAR.map((item, index) => (
        <li
          key={index}
          style={{
            fontWeight: activeItem === index ? "bold" : "normal",
            color: activeItem === index ? "blue" : "black",
            cursor: "pointer",
          }}
          onClick={() => setActiveItem(index)}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};

const App = () => {
  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
  const [activeItem, setActiveItem] = useState(null);

  return (
    <div>
      <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
        Toggle Sidebar
      </button>

      {isShowingSidebar && (
        <Sidebar
          activeItem={activeItem}
          setActiveItem={setActiveItem}
        />
      )}
    </div>
  );
};

Downsides of This Approach

• Extra prop drilling
• State management logic moves away from the component that owns it
• Becomes harder to scale and maintain for complex UIs

React 19 Solution: Activity Component

Basic Syntax

<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
  <Sidebar />
</Activity>

Sidebar Example Using Activity

import { Activity } from "react";

const App = () => {
  const [isShowingSidebar, setIsShowingSidebar] = useState(true);

  return (
    <div>
      <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
        Toggle Sidebar
      </button>

      <Activity mode={isShowingSidebar ? "visible" : "hidden"}>
        <Sidebar />
      </Activity>
    </div>
  );
};

What Happens Now?

• The sidebar is visually hidden, not unmounted
• The selected menu item remains intact
• When shown again, the sidebar restores exactly where it left off

How Activity Works Internally

When an Activity boundary is hidden:

• React applies display: none to hide the UI
• All Effects are cleaned up (subscriptions, timers, listeners)
• The component still re-renders in response to new props (at a lower priority)

When the boundary becomes visible again:

• React restores the UI
• Internal state is preserved
• Effects are re-created

Why Activity Is Powerful

You can think of Activity as background rendering:

• Keeps UI state alive
• Avoids unnecessary remounts
• Prevents unwanted side effects while hidden
• Perfect for sidebars, tabs, drawers, and multi-panel layouts

Support for document metadata in React 19

In HTML, document metadata tags like