Fix for <Form> component when using React SSR (#2612)

* Update useForm.ts

* refactor

Author: pascalbaljet

packages/react/src/react.ts

@@ -0,0 +1,7 @@
+import { DependencyList, EffectCallback, useEffect, useLayoutEffect } from 'react'
+
+// Inspired by react-redux, this hook uses useLayoutEffect in the browser, and useEffect
+// when using SSR. Currently, useLayoutEffect doesn't work when rendered on the server.
+export function useIsomorphicLayoutEffect(effect: EffectCallback, deps?: DependencyList): void {
+  typeof window === 'undefined' ? useEffect(effect, deps) : useLayoutEffect(effect, deps)
+}

packages/react/src/useForm.ts

@@ -11,7 +11,8 @@ import {
   VisitOptions,
 } from '@inertiajs/core'
 import { cloneDeep, get, has, isEqual, set } from 'lodash-es'
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useIsomorphicLayoutEffect } from './react'
 import useRemember from './useRemember'
 
 export type SetDataByObject<TForm> = (data: Partial<TForm>) => void
@@ -249,7 +250,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     [setDefaults],
   )
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!dataAsDefaults) {
       return
     }