Proxy-Based Deep State Mutability Tracking for Custom React Dispatchers

import { useState, useCallback } from 'react';
 
function createDraftProxy(target, changes) {
  return new Proxy(target, {
    get(obj, prop) {
      const val = Reflect.get(obj, prop);
      if (typeof val === 'object' && val !== null) {
        return createDraftProxy(val, (changes[prop] = changes[prop] || {}));
      }
      return val;
    },
    set(obj, prop, value) {
      if (Reflect.get(obj, prop) !== value) {
        changes[prop] = value;
        return Reflect.set(obj, prop, value);
      }
      return true;
    }
  });
}
 
export function useDraftState(initialState) {
  const [state, setState] = useState(initialState);
 
  const updateState = useCallback((recipe) => {
    setState((prev) => {
      const draft = JSON.parse(JSON.stringify(prev));
      const changes = {};
      const proxy = createDraftProxy(draft, changes);
      recipe(proxy);
      return draft;
    });
  }, []);
 
  return [state, updateState];
}