fix(structure): set patchRef in an insertion effect instead of regula…

…r useEffect (#8194)

dev/test-studio/schema/debug/patchOnMount.tsx

@@ -0,0 +1,30 @@
+import {defineType} from '@sanity/types'
+import {useEffect, useRef} from 'react'
+import {set} from 'sanity'
+
+export const patchOnMountDebug = defineType({
+  type: 'document',
+  name: 'patchOnMountDebug',
+  fields: [
+    {
+      type: 'string',
+      name: 'title',
+    },
+  ],
+  components: {
+    // eslint-disable-next-line func-name-matching
+    input: function PatchOnMountInput(props) {
+      const {onChange} = props
+      const mounted = useRef(false)
+
+      useEffect(() => {
+        if (!mounted.current) {
+          onChange(set(`${Math.random()}`, ['title']))
+          mounted.current = true
+        }
+      }, [onChange])
+
+      return props.renderDefault(props)
+    },
+  },
+})

dev/test-studio/schema/index.ts

@@ -53,6 +53,7 @@ import localeString from './debug/localeString'
 import manyFieldsTest from './debug/manyFieldsTest'
 import notitle from './debug/notitle'
 import {objectsDebug} from './debug/objectsDebug'
+import {patchOnMountDebug} from './debug/patchOnMount'
 import poppers from './debug/poppers'
 import presence, {objectWithNestedArray} from './debug/presence'
 import previewImageUrlTest from './debug/previewImageUrlTest'
@@ -238,6 +239,7 @@ export const schemaTypes = [
   recursiveObjectTest,
   recursiveObject,
   recursivePopover,
+  patchOnMountDebug,
   simpleArrayOfObjects,
   simpleReferences,
   reservedFieldNames,

dev/test-studio/structure/constants.ts

@@ -55,6 +55,7 @@ export const DEBUG_INPUT_TYPES = [
   'fieldsetsTest',
   'fieldValidationInferReproDoc',
   'focusTest',
+  'patchOnMountDebug',
   'formInputDebug',
   'initialValuesTest',
   'inspectorsTest',

packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx

@@ -10,7 +10,7 @@ import {
 import {useToast} from '@sanity/ui'
 import {fromString as pathFromString, pathFor, resolveKeyedPath} from '@sanity/util/paths'
 import {omit, throttle} from 'lodash'
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {memo, useCallback, useEffect, useInsertionEffect, useMemo, useRef, useState} from 'react'
 import deepEquals from 'react-fast-compare'
 import {
   type DocumentFieldAction,
@@ -297,10 +297,13 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
 
   const patchRef = useRef<(event: PatchEvent) => void>(() => {
     throw new Error(
-      'Attempted to patch the Sanity document during initial render. Input components should only call `onChange()` in an effect or a callback.',
+      'Attempted to patch the Sanity document during initial render or in an `useInsertionEffect`. Input components should only call `onChange()` in a useEffect or an event handler.',
     )
   })
-  useEffect(() => {
+  useInsertionEffect(() => {
+    // note: this needs to happen in an insertion effect to make sure we're ready to receive patches from child components when they run their effects initially
+    // in case they do e.g. `useEffect(() => props.onChange(set("foo")), [])`
+    // Note: although we discourage patch-on-mount, we still support it.
     patchRef.current = (event: PatchEvent) => {
       // when creating a new draft
       if (!editState.draft && !editState.published) {