fix(ui): ensure UI is reactive to HMR changes, without having to refresh the page (#9602)

**Before:**

https://github.com/user-attachments/assets/c4ad9184-4629-419d-a30e-68dd802da387


**After:**

https://github.com/user-attachments/assets/4f7bcd4a-e1a7-464e-8036-55f48c1d5da1

Author: AlessioGr

packages/ui/src/elements/DocumentFields/index.tsx

@@ -2,7 +2,7 @@
 import type { ClientField, SanitizedDocumentPermissions } from 'payload'
 
 import { fieldIsSidebar } from 'payload/shared'
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js'
 import { RenderFields } from '../../forms/RenderFields/index.js'
@@ -32,11 +32,7 @@ export const DocumentFields: React.FC<Args> = ({
   readOnly: readOnlyProp,
   schemaPathSegments,
 }) => {
-  const [{ hasSidebarFields, mainFields, sidebarFields }] = React.useState<{
-    hasSidebarFields: boolean
-    mainFields: ClientField[]
-    sidebarFields: ClientField[]
-  }>(() => {
+  const { hasSidebarFields, mainFields, sidebarFields } = useMemo(() => {
     return fields.reduce(
       (acc, field) => {
         if (fieldIsSidebar(field)) {
@@ -50,12 +46,12 @@ export const DocumentFields: React.FC<Args> = ({
         return acc
       },
       {
-        hasSidebarFields: false as boolean,
+        hasSidebarFields: false,
         mainFields: [] as ClientField[],
         sidebarFields: [] as ClientField[],
       },
     )
-  })
+  }, [fields])
 
   const formInitializing = useFormInitializing()
   const formProcessing = useFormProcessing()

packages/ui/src/providers/Config/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { ClientCollectionConfig, ClientConfig, ClientGlobalConfig } from 'payload'
 
-import React, { createContext, useCallback, useContext, useState } from 'react'
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
 
 export type ClientConfigContext = {
   config: ClientConfig
@@ -29,6 +29,12 @@ export const ConfigProvider: React.FC<{
 }> = ({ children, config: configFromProps }) => {
   const [config, setConfig] = useState<ClientConfig>(configFromProps)
 
+  // Need to update local config state if config from props changes, for HMR.
+  // That way, config changes will be updated in the UI immediately without needing a refresh.
+  useEffect(() => {
+    setConfig(configFromProps)
+  }, [configFromProps])
+
   const getEntityConfig = useCallback(
     ({ collectionSlug, globalSlug }: { collectionSlug?: string; globalSlug?: string }) => {
       if (collectionSlug) {