Summary
To provide stable unique identifier generation between the client and server side, we need to introduce a new context to be used whenever EUI is rendered on the server and hydrated in the browser.
The official React.useId hook already provides stable ID generation in function components but is only available in React 18. We must provide a universal solution since we officially support React 16 and up and still have many class components utilizing htmlIdGenerator that can't use this new fancy hook directly.
Acceptance Criteria
<EuiSsrProvider> should be implemented to provide a new React context- The context should store the following properties
prefix: string - a global prefix to use in all generations in the scope of the provider instance (default to a random 6-digit hash);current: number - a value incremented by one on every id generation call
<EuiSsrProvider> context should be used to generate stable unique IDs in useGeneratedHtmlId()
Summary
To provide stable unique identifier generation between the client and server side, we need to introduce a new context to be used whenever EUI is rendered on the server and hydrated in the browser.
The official
React.useIdhook already provides stable ID generation in function components but is only available in React 18. We must provide a universal solution since we officially support React 16 and up and still have many class components utilizinghtmlIdGeneratorthat can't use this new fancy hook directly.Acceptance Criteria
<EuiSsrProvider>should be implemented to provide a new React contextprefix: string- a global prefix to use in all generations in the scope of the provider instance (default to a random 6-digit hash);current: number- a value incremented by one on every id generation call<EuiSsrProvider>context should be used to generate stable unique IDs inuseGeneratedHtmlId()