React 18 useId Guide with Examples

reactjs
reactjs

The React useId() hook is used to generate a unique identifier (ID) for a component instance. The ID is then used to assign IDs to elements that are tied to the component instance.

In some cases, the useId hook is useful when you need a unique identifier for elements that don’t have a fixed ID, such as when iterating over a set of data in a list or table.

In this guide, we’ll look at how to use the React useId hook with examples.

Usage Example

First import the useId hook from the react package:

import { useId } from 'react';
// Create a constant to store our ID:

export function MyComponent() {
  const myId = useId();

  // Pass our ID to the element in question:
  return <div id={myId}>hello</div>;
}

And that’s it! Your element now has a unique ID that is tied to the component instance.

You can also use the useId hook in other contexts example, if you have a group of checkboxes, you can create an ID for each checkbox and store it in an array.

import { useId } from 'react';
// Create a constant to store our ID:

export function MyComponent() {
  const ids = [];

  // or a one-liner
  // const ids = Array.from({length: 5}).map(_ => useId());
  for (let i = 0; i < 5; i++) {
    const id = useId();
    ids.push(id);
  }

  // Now when we render each checkbox, we can use the ID from the array
  return (
    <form>
      <input type='checkbox' id={ids[0]} />
      <input type='checkbox' id={ids[1]} />
    </form>
  );
}

Real-world usecase for useId

Following are two real-world examples of how you would go about using this hook in your react application.

Creating a reusable login form component

When a user logs in they can use the useId hook to track the user’s session and store the associated data in localstorage.

import React, {
  useState,
  useEffect,
  useReducer,
  useCallback,
  useId,
} from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState(''); // Used to track input field
  const [password, setPassword] = useState(''); // Used to track input field
  const [error, setError] = useState(null); // Used to track errors
  const [isLoggingIn, setIsLoggingIn] = useState(false); // Used to track login state
  const loginId = useId(); // Used to track login session

  const allowLogin = (username, password) => {
    // auth logic here...
  };

  useEffect(() => {
    if (isLoggingIn) {
      localStorage.setItem('loginId', loginId);
    }
  }, [isLoggingIn, loginId]);

  const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      setIsLoggingIn(true);
      setError(null);

      if (allowLogin(username, password)) {
        // login success
        // set user session here
      } else {
        setError('Username or password is incorrect');
      }
    },
    [username, password]
  );

  return (
    <form onSubmit={onSubmit}>
      <fieldset>
        <input
          type='text'
          name='username'
          id='username'
          onChange={(e) => setUsername(e.target.value)}
          min='8'
        />
        <input
          type='password'
          name='password'
          id='password'
          onChange={(e) => setPassword(e.target.value)}
          min='8'
        />
      </fieldset>
      {error && <p>{error}</p>}
      <button type='submit' disabled={isLoggingIn} />
      <Loginbutton />
    </form>
  );
};

Accessing user preferences

useId can be used to store user preferences such as font size, colors, etc. and use that data to customize the user’s experience.

import React, {
  useState,
  useEffect,
  useReducer,
  useCallback,
  useId,
} from 'react';

//Set the default settings
const defaultSettings = {
  fontSize: '12px',
  color: '#000000',
  showImages: true,
};
// Retrieve user preferences from storage
const userId = 'dbc1a7f5-5209-4296-8092-2bcaa0ee48be'; // random string
const storedSettings = localStorage.getItem(userId);
const settings = storedSettings ? JSON.parse(storedSettings) : defaultSettings;

const LoginForm = () => {
  //Apply user preferences to the page
  document.body.style.fontSize = settings.font.size;
  document.body.style.color = settings.color;
  document.body.style.backgroundImage = settings.showImages
    ? 'url(img.jpg)'
    : 'none';

  //Save user preferences into storage
  const [, setSettings] = useState(settings);
  const userId = useId();

  useEffect(() => {
    localStorage.setItem(userId, JSON.stringify(settings));
  }, [userId, settings]);

  //Handle input changes
  const handleChange = useCallback((e) => {
    e.preventDefault();
    const { name, value } = e.target;
    setSettings((prevState) => {
      return { ...prevState, [name]: value };
    });
  }, []);

  return (
    <form>
      <label>Font Size</label>
      <input
        type='text'
        name='fontSize'
        value={settings.fontSize}
        onChange={handleChange}
      />{' '}
      <label>Color</label>
      <input
        type='text'
        name='color'
        value={settings.color}
        onChange={handleChange}
      />{' '}
      <label>Show Images?</label>
      <input
        type='checkbox'
        name='showImages'
        checked={settings.showImages}
        onChange={handleChange}
      />
    </form>
  );
};

export default LoginForm;

And that’s how you can use the React useId hook with examples. We hope you’ve found this guide useful!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.