Adding example for react using hooks

[nahumzs]

This helps to understand how to use nanoid with react hooks.

[ai]

Am I right, that nanoid() will be called on every component render? I could be bad for performance.

What do you think about this way to use Nano ID with hooks?

const key = useMemo(nanoid)

[TrySound]

@ai in this case nanoid is called on every render too unless you specify dependencies list. And still useMemo is not stable. It works only for pure computations. React may drop cache any time. These are ways to go.

const useNanoid = () => {
  const ref = React.useRef(null)
  if (ref.current == null) {
    ref.current = nanoid();
  }
  return ref.current;
}

const Component = () => {
  const id = useNanoid()
}

const Component = () => {
  const [id] = React.useState(() => nanoid());
}

[nahumzs]

I put a small example on place https://codesandbox.io/s/nanoid-with-hooks-yv1u5

[TrySound]

Did you save it? I don't see any nanoid usage.

[nahumzs]

@TrySound sorry my bad is there now.

[ai]

@nahumzs OK, seems like useMemo doesn't work. What do you think about const [id] = useState(nanoid)?

[TrySound]

useMemo(() => nanoid(), []) does work but eventually may break because nanoid is not pure computation.

[nahumzs]

const id = React.useState(() => nanoid()) and const [idState] = React.useState(nanoid) would do the work I think is down to what flavor do you prefer I'm ok with both.

[ai]

ref has a problem with calling Nano ID on every component render. It didn't change the ID, but use CPU.

[ai]

Thanks for improving docs :)