SSR compatibility patch for useId(...)

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -114,6 +114,10 @@ export function useNumberField(props: NumberFieldProps, state: NumberFieldState,
   });
 
   useEffect(() => {
+    if (!document.getElementById(inputId)) {
+      return () => {};
+    }
+
     const handleInputScrollWheel = e => {
       // If the input isn't supposed to receive input, do nothing.
       // TODO: add focus

packages/@react-aria/utils/src/useId.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {useLayoutEffect, useMemo, useState} from 'react';
+import {useEffect, useLayoutEffect, useMemo, useState} from 'react';
 
 let map: Map<string, (v: string) => void> = new Map();
 
@@ -24,12 +24,19 @@ let randomInstanceNumber = Math.round(Math.random() * 10000000000);
  * @param defaultId - Default component id.
  */
 export function useId(defaultId?: string): string {
-  let [value, setValue] = useState(defaultId);
-  let res = useMemo(() => value || `react-aria-${randomInstanceNumber}-${++id}`, [value]);
-  map.set(res, setValue);
-  return res;
-}
+  let [value, setValue] = useState(defaultId || '');
+  // preserve SSR rendering compatibility
+  // only use the auto-generated id after component mounts client-side
+  useEffect(() => {
+    const res = defaultId || value || `react-aria-${randomInstanceNumber}-${++id}`;
+    map.set(res, setValue);
+    if (res !== value) {
+      setValue(res);
+    }
+  }, [defaultId, value])
 
+  return value;
+}
 /**
  * Merges two ids.
  */
@@ -59,7 +66,7 @@ export function mergeIds(a: string, b: string): string {
  */
 export function useSlotId(): string {
   let [id, setId] = useState(useId());
-  useLayoutEffect(() => {
+  useEffect(() => {
     let setCurr = map.get(id);
     if (setCurr && !document.getElementById(id)) {
       setId(null);