This is a weekly newsletter written by Chetan Gupta.

Chill and Vibe (first blog) not mine tho!

What's in a UUIDv7

UUID Version 7 (UUIDv7) is a time-based identifier that encodes a Unix timestamp with millisecond precision in its first 48 bits. Of the entire UUID structure, 6 bits signify its version and variant, while the remaining 74 bits are randomized.

Due to its time-ordered design, UUIDv7 values are essentially sequential, resolving the index locality issue prevalent in databases. This sequential nature of UUIDv7 offers better database performance compared to the random design of UUIDv4. A study from the 2nd quadrant blog demonstrated that sequential UUIDs outperform random UUIDs in both writing and reading tasks.

Importantly, UUIDv7 maintains the standard UUID structure, ensuring it's compatible with systems currently using other UUID versions. This makes transitioning from UUIDv4 to UUIDv7 in systems like Postgres straightforward.

In my applications, I've been creating primary keys with the format:

Where the prefix is a ~3-character identifier that identifies the resource. This makes it very easy to see what resource a key is for just by looking at it. I often take out the dashes as well to make it easier to copy.

The downside with my strategy is that the only column that works with this is text in Postgres. I can't use serial or uuid because it's neither of those things. This can lead to the same problem mentioned above, where the sequential writes result in poor index formation.

I'm excited to try the new UUIDv7 format for primary keys gaining the advantage of a time stamp as well as the uniqueness of a UUID. I will lose out on an easy identifier in that transition. We'll see if it's worth it.

Tech Tip

Some sites will use the favicon as an icon that can change depending on the site status (such as an alert or dashboard). You can do this easily with React:

import React, { useState, useEffect } from 'react';

function FaviconChanger() {
  const [faviconState, setFaviconState] = useState('default');

  const faviconMap = {
    default: '/path-to-default-favicon.ico',
    alternate: '/path-to-alternate-favicon.ico',
    // ... you can add more states and associated favicon paths here
  };

  useEffect(() => {
    let linkElement = document.querySelector("link[rel*='icon']");

    if (!linkElement) {
      linkElement = document.createElement('link');
      linkElement.type = 'image/x-icon';
      linkElement.rel = 'shortcut icon';
      document.getElementsByTagName('head')[0].appendChild(linkElement);
    }

    linkElement.href = faviconMap[faviconState];
  }, [faviconState]);

  return (
    <div>
      <button onClick={() => setFaviconState('default')}>Set Default Favicon</button>
      <button onClick={() => setFaviconState('alternate')}>Set Alternate Favicon</button>
    </div>
  );
}

You can add this logic to another component instead of making it a separate component.

Published by: