From 34060e93d674cf96c97a581f6acca44991b9a987 Mon Sep 17 00:00:00 2001
From: Cody Olsen <stipsan@gmail.com>
Date: Fri, 13 Dec 2024 19:53:04 +0100
Subject: [PATCH] fix: unsafe ref access during render

---
 .../DocumentInspectorMenuItemsResolver.tsx    | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/sanity/src/structure/panes/document/DocumentInspectorMenuItemsResolver.tsx b/packages/sanity/src/structure/panes/document/DocumentInspectorMenuItemsResolver.tsx
index bd5a925c59a..8242f08bd49 100644
--- a/packages/sanity/src/structure/panes/document/DocumentInspectorMenuItemsResolver.tsx
+++ b/packages/sanity/src/structure/panes/document/DocumentInspectorMenuItemsResolver.tsx
@@ -1,4 +1,4 @@
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {type DocumentInspector, type DocumentInspectorMenuItem, useUnique} from 'sanity'
 
 interface DocumentInspectorMenuItemsResolverProps {
@@ -18,36 +18,26 @@ export function DocumentInspectorMenuItemsResolver(props: DocumentInspectorMenuI
   const {documentId, documentType, inspectors, onMenuItems} = props
 
   const len = inspectors.length
-  const lenRef = useRef(len)
-
   const [menuItems, setMenuItems] = useState<DocumentInspectorMenuItem[]>(() =>
     Array.from(new Array(len)),
   )
 
-  const menuItemsRef = useRef(menuItems)
-
   useEffect(() => {
-    if (lenRef.current !== len) {
+    if (menuItems.length !== len) {
       const newFieldActions = Array.from(new Array(len))
 
       for (let i = 0; i < len; i++) {
-        newFieldActions[i] = menuItemsRef.current[i]
+        newFieldActions[i] = menuItems[i]
       }
 
-      lenRef.current = len
-
-      setMenuItems(() => {
-        menuItemsRef.current = newFieldActions
-        return newFieldActions
-      })
+      setMenuItems(newFieldActions)
     }
-  }, [len])
+  }, [len, menuItems])
 
   const setMenuItem = useCallback((index: number, node: DocumentInspectorMenuItem) => {
     setMenuItems((prev) => {
       const next = [...prev]
       next[index] = node
-      menuItemsRef.current = next
       return next
     })
   }, [])