Hook for consistent auto-incrementing ids between SSR and browser. To use, wrap your app with <IdProvider> and call useId or useGetId

use-id.js

import React, {createContext, useContext, useRef} from 'react'
import PropTypes from 'prop-types'

const Id = createContext()

const useIdGetter = (prefix = 'id') => {
	const ref = useRef()
	if (!ref.current) {
		const me = {id: 0, get: () => `${prefix}-${me.id++}`}
		ref.current = me
	}
	return ref.current.get
}

export const IdProvider = ({children}) => {
	const get = useIdGetter()
	return <Id.Provider value={get}>{children}</Id.Provider>
}
IdProvider.propTypes = {children: PropTypes.node.isRequired}

export const useId = () => {
	const getter = useContext(Id)
	const ref = useRef()
	if (!ref.current) ref.current = getter()
	return ref.current
}

export const useGetId = () => {
	const getter = useContext(Id)
	const base = useRef()
	if (!base.current) base.current = getter()
	return useIdGetter(base.current)
}

available as the react-use-id-hook npm package