A right way to use uuid as key in React?

Question

I was fetching videos from an API and there were duplicates. So, I applied uuid to generate a key for each - key={uuid()} - until realizing that I was generating a new key for every render.

Below is my fix, but I am not quite sure if it's really solving the issue.

export default function VideoList({ videos, observedElement }) {
  const location = useLocation();

  const videoList = videos.map((video, index) => {
    video.uuid = uuid();

    return (
      <Link
        to={`/videos/${video.id.videoId}`}
        state={{ backgroundLocation: location }}
        key={video.uuid}
      >
        <VideoListEntry info={video} ref={observedElement} />
      </Link>
    );

  return <div>{videoList}</div>
}

Edit: I know that using an id from db or creating a combination within the given data is more preferable. But I just want to know if there is a way to generate a stable key with uuid.

Answer 1

The correct way would be to get the id directly from wherever you are getting the videos.

The next one, would be to generate them the moment you receive them from the remote location ( assuming you get them from an API ). So, right after getting them, enrich them with the uuid, and then store them to the state/store.

The third solution, would be to use a useEffect inside your component, that would only generate ids when the video property is altered.

 export default function VideoList({ videos = [], observedElement }) { const location = useLocation(); const [videosWithId, setVideosWithId] = useState(videos); useEffect(() => { const withId = videos.map(video => ({...video, uuid: uuid() })) setVideosWithId(withId); }, [videos]); // use videosWithId from below this point, instead of the videos prop.... }

Answer 2

define a variable that holds the value of uuid like this and use it I think it will work for you

export default function VideoList({ videos, observedElement }) {
  const location = useLocation();

  const videoList = videos.map((video, index) => {
    let uuid = uuid()
    video.uuid = uuid 

    return (
      <Link
        to={`/videos/${video.id.videoId}`}
        state={{ backgroundLocation: location }}
        key={uuid}
      >
        <VideoListEntry info={video} ref={observedElement} />
      </Link>
    );

  return <div>{videoList}</div>
}

Answer 3

export default function VideoList({ videos, observedElement }) {
  const location = useLocation();

  videos.forEach(video => video.uuid = uuid()); // loop through the list and generate the id
  
  const videoList = videos.map((video, index) => {
    return (
      <Link
        to={`/videos/${video.id.videoId}`}
        state={{ backgroundLocation: location }}
        key={video.uuid}
      >
        <VideoListEntry info={video} ref={observedElement} />
      </Link>
    );

  return <div>{videoList}</div>
}