@mui/utils

Deep object manipulation

Allows for the deep merging of two objects, useful for combining default and user-provided configurations.

import { deepmerge } from '@mui/utils';
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = deepmerge(obj1, obj2);
// Result: { a: 1, b: 3, c: 4 }

Event handling

Facilitates getting the owner document of a node, which is helpful for correctly attaching event listeners in a document-agnostic way.

import { ownerDocument } from '@mui/utils';
const doc = ownerDocument(node);
// Use doc to add or remove event listeners

System property helpers

Provides an enhanced effect hook that uses `useLayoutEffect` on the server to avoid warnings and `useEffect` on the client.

import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
useEnhancedEffect(() => {
  // Effect logic here
}, [deps]);