import { useState , useEffect , useLayoutEffect } from 'react' ; let serverHandoffComplete = false ; let id = 0 ; const genId = ( ) => ++ id ; export const useId = ( fallback ) => { const initialId = fallback || ( serverHandoffComplete ? genId ( ) : null ) ; const [ id , setId ] = useState ( initialId ) ; useLayoutEffect ( ( ) => { if ( id === null ) { setId ( genId ( ) ) ; } } , [ ] ) ; useEffect ( ( ) => { if ( serverHandoffComplete === false ) { serverHandoffComplete = true ; } } , [ ] ) ; return id != null ? String ( id ) : undefined ; } ;