menu-button: button id issues about reach-ui HOT 5 CLOSED

I see that hasn't been much activity in the RFC regarding isomorphic IDs reactjs/rfcs#32 .

The only decent solution that I've found is to do something like https://github.com/thearnica/react-uid#server-side-friendly-uid which uses the Context API to track used IDs.

@ryanflorence what do you think ?

from reach-ui.

I was planning something exactly like that. I'm gonna wait for hooks to ship though so it's not so arduous.

from reach-ui.

Would this work:

let genId = (prefix, count) => `${prefix}-${count}`;

let count = -1;
let getInitialMenuState = () => ({
  // ...
  buttonId: genId("button", count++)
});

?
Or is the issue this could clash with other user code.

If so i'll push the PR. Will be easy to migrate to hooks.

from reach-ui.

Accept a props.id before autogenerating one

export const useId = (defaultValue) => {
  const [id] = useState(defaultValue || genId);
  return id;
};

Generate ids in a deterministic way so that rehydrating a server render works (I think it ought to be broken right now)

I guess we need something like this https://github.com/thearnica/react-uid. It is actually pretty hard to solve it in user land, maybe we need to ask React team?

from reach-ui.

It seems to be that the react-uid library is now using hooks and the hooks are SSR friendly. So I suppose we could change the UUID generator to the react-uid one?

Source: https://github.com/thearnica/react-uid#hooks-167

from reach-ui.