refactor(ui): simplify ConfigProvider, improve useControllableState types and defaultValue fallback (#14409)

Our `ConfigProvider` has a `useEffect` that updates its initial state if
the config from props changes (e.g. due to HMR running).

Turns out @jacobsfletch added this awesome hook called
`useControllableState` that already does exactly this: manage an
internal state and react to prop changes while ensuring it does not run
unnecessarily on mount.

--- 

**Improvements to `useControllableState`:**

- **Uses `useControllableState` in `ConfigProvider`** - reduces
duplicative state management code
- **Simplifies implementation** - removes redundant `useCallback`
wrapper around `setLocalValue`
- **Fixes fallback behavior** - `defaultValue` now consistently returns
when value is `null` or `undefined`, not just on initial render.
Previously would fail to fallback if value became null/undefined after
mounting (e.g. if useEffect ran).
- **Improves type safety** - `defaultValue` is a separate generic that
properly types the return value

**Type example:**
```typescript

const propValue: string | undefined = 'test' as string | undefined

// Without defaultValue - return type for value is string | undefined
const [value, setValue] = useControllableState(propValue)


// With defaultValue - return type for value is string. Before this PR, it would be string | undefined
const [value, setValue] = useControllableState(propValue, 'fallback')
```

Author: AlessioGr

packages/ui/src/hooks/useControllableState.ts

@@ -1,17 +1,25 @@
 'use client'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * A hook for managing state that can be controlled by props but also overridden locally.
  * Props always take precedence if they change, but local state can override them temporarily.
  *
+ * @param propValue - The controlled value from props
+ * @param fallbackValue - Value to use when propValue is null or undefined
+ *
  * @internal - may change or be removed without a major version bump
  */
-export function useControllableState<T>(
+export function useControllableState<T, D>(
+  propValue: T,
+  fallbackValue: D,
+): [T extends NonNullable<T> ? T : D | NonNullable<T>, (value: ((prev: T) => T) | T) => void]
+export function useControllableState<T>(propValue: T): [T, (value: ((prev: T) => T) | T) => void]
+export function useControllableState<T, D>(
   propValue: T,
-  defaultValue?: T,
-): [T, (value: ((prev: T) => T) | T) => void] {
-  const [localValue, setLocalValue] = useState<T>(propValue ?? defaultValue)
+  fallbackValue?: D,
+): [T extends NonNullable<T> ? T : D | NonNullable<T>, (value: ((prev: T) => T) | T) => void] {
+  const [localValue, setLocalValue] = useState<T>(propValue)
   const initialRenderRef = useRef(true)
 
   useEffect(() => {
@@ -23,9 +31,8 @@ export function useControllableState<T>(
     setLocalValue(propValue)
   }, [propValue])
 
-  const setValue = useCallback((value: ((prev: T) => T) | T) => {
-    setLocalValue(value)
-  }, [])
-
-  return [localValue, setValue]
+  return [localValue ?? fallbackValue, setLocalValue] as [
+    T extends NonNullable<T> ? T : D | NonNullable<T>,
+    (value: ((prev: T) => T) | T) => void,
+  ]
 }

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

@@ -8,7 +8,9 @@ import type {
   GlobalSlug,
 } from 'payload'
 
-import React, { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { createContext, use, useCallback, useEffect, useMemo } from 'react'
+
+import { useControllableState } from '../../hooks/useControllableState.js'
 
 type GetEntityConfigFn = {
   // Overload #1: collectionSlug only
@@ -43,20 +45,10 @@ export const ConfigProvider: React.FC<{
   readonly children: React.ReactNode
   readonly config: ClientConfig
 }> = ({ children, config: configFromProps }) => {
-  const [config, setConfig] = useState<ClientConfig>(configFromProps)
-
-  const isFirstRenderRef = useRef(true)
-
   // 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(() => {
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false
-      return
-    }
-
-    setConfig(configFromProps)
-  }, [configFromProps, setConfig])
+  // useControllableState handles this for us.
+  const [config, setConfig] = useControllableState<ClientConfig>(configFromProps)
 
   // Build lookup maps for collections and globals so we can do O(1) lookups by slug
   const { collectionsBySlug, globalsBySlug } = useMemo(() => {