Generating unique ID's and SSR (for a11y and more)

Howdy ya’ll,

tl dr: please provide a way to coordinate pseudo-random identifiers across the client and server

This issue has been discussed a bit before (#1137, #4000) but I continually run into this issue, trying to build libraries that provide accessible components by default. The react component model generally speaking offers a big opportunity to raise the often low bar for accessibility in the library and widget world, see experiments like @ryanflorence’s react-a11y.

For better or for worse the aria, and a11y API’s in the browser are heavily based on using ID’s to link components together. aria-labelledby, aria-describedby, aria-owns,aria-activedescendent, and so on all need’s ID’s. In a different world we would just generate ids where needed and move on, however server-side rendering makes that complicated, because any generated ID is going to cause a mismatch between client/server.

We’ve tried a few different approaches to address some of this, one is making id’s required props on components that need them. That gets kinda ugly in components that need a few id’s but moreso it annoys users. Its unfortunate because if we could generate deterministic id’s we could just provide more accessible components by default.

The frustrating part is that the component generally has all the information it needs to just set the various aria info necessary to make the component usable with a screen reader, but are stymied by not having the user provide a bunch of globally unique ids’

So far only really reasonable approaches I’ve seen are @syranide’s solution of a root ID store, and using _rootID. The latter obviously has problems. The former doesn’t scale well for library authors. Everyones’ root App component is already wrapped in a Router, Provider, etc, having every library use their own root level ID provider is probably not super feasible and annoying to users.

It seems like the best way to do this would be if React (or a React addon) could just provide a consistent first class way to get a unique identifier for a component, even if it is just a base64 of the node’s _rootID.

thanks for all the hard work everyone!

[gaearon]

Just to follow up on this, we are testing a potential solution to this internally but not ready to draft an RFC yet.

[milesj]

You’re over-thinking this a bit. All the reasons you keep stating are easily fixable. Assuming that the server and client render everything in the same order (not sure why they wouldn’t), just have a separate function module that generates and keeps track of things.

let idCounter = 0;

export default function generateUID(inst) {
    return btoa(inst.constructor.name) + idCounter++;
}

And in the component.

import generateUID from './generateUID';

class Foo extends React.Component {
    constructor() {
        super();
        this.uid = generateUID(this);
    }
}

And if for some reason you want individually incrementing counters per component, then just use a WeakMap in the function module.