react-use-uuid

When building a Component using React Hooks, there are instances where a unique id is necessary. With React class components one could simply generate an ID and store it as a property on the class instances (not state, though there is nothing wrong with using state). An unfortunate side effect of Hooks is that they aren't class instances and we must rely on a new paradigm for generating a unique id for the lifetime of our component.

useId does just that by creating a memoized id generator. The benefit is two-fold. First, the id generator only runs on the first render, saving us from wasting time generating ids that won't be used. Second, our id never changes for the entire lifecycle of our component, giving us a bit more reliability when using said id.

How to use it

1import React, { useCallback, useEffect } from 'react';
2import useId from 'react-use-uuid';
3
4function MyComponent() {
5    const id = useId();
6    const onDrop = useCallback((files) => console.log(`Received ${files.length} files`));
7
8    useEffect(() => {
9        // Third party code with limited integration
10        Aspera.Connect.setDragDropTargets(`#${id}`, onDrop);
11    }, []);
12
13    return(
14        <div id={id}>
15            Drop your files here
16        </div>
17    );
18}

Use a different version of UUID ID generation

Behind the scenes, useId makes use of the powerful uuid package. By default, version 4 of the id generation is used but all versions are supported through an optional parameter to useId.

1import React, { useCallback, useEffect } from 'react';
2import useId from 'react-use-uuid';
3import uuidv5 from 'uuid/v5';
4
5function MyComponent() {
6    const id = useId('v5', 'hello.example.com', uuidv5.DNS);
7    const onDrop = useCallback((files) => console.log(`Received ${files.length} files`));
8
9    useEffect(() => {
10        // Third party code with limited integration
11        Aspera.Connect.setDragDropTargets(`#${id}`, onDrop);
12    }, []);
13
14    return(
15        <div id={id}>
16            Drop your files here
17        </div>
18    );
19}

Custom id hook

If you find your application needs v3 or v5 of uuid, which require additional properties to generate an id, create a custom hook to keep your code readable and DRY.

1// UseCustomId.js
2import useId from 'react-use-uuid';
3import uuidv5 from 'uuid/v5';
4
5function useCustomId() {
6    return useId('v5', 'hello.example.com', uuidv5.DNS);
7}

1// MyComponent.js
2import React, { useCallback, useEffect } from 'react';
3import useCustomId from './useCustomId';
4
5function MyComponent() {
6    const id = useCustomId();
7    const onDrop = useCallback((files) => console.log(`Received ${files.length} files`));
8
9    useEffect(() => {
10        // Third party code with limited integration
11        Aspera.Connect.setDragDropTargets(`#${id}`, onDrop);
12    }, []);
13
14    return(
15        <div id={id}>
16            Drop your files here
17        </div>
18    );
19}