Skip to main content

mergeDeepRight()

mergeDeepRight<T, U>(left, right): T & U

Recursively merges objects, with right values taking precedence.

note

Arrays are replaced, not merged.

Type Parameters​

T: T extends AnyRecord​

The type of the left object.

U: U extends AnyRecord​

The type of the right object.

Parameters​

left: T​

The left object (fallback values).

right: U​

The right object (takes precedence).

Returns: T & U​

A new deeply merged object.

See Also​

mergeDeepLeft

Since​

2.0.0

Note​

Symbol keys are included via Reflect.ownKeys.

Performance​

O(n) time & space where n is total number of properties. Early returns for null/undefined/primitives/arrays. Uses spread operator for shallow copy.

Example​

const left = { user: { name: 'John', age: 30 } };
const right = { user: { name: 'Jane', email: 'jane@example.com' } };

mergeDeepRight(left, right);
// => { user: { name: 'Jane', age: 30, email: 'jane@example.com' } }

// Arrays: right wins
mergeDeepRight({ items: [1, 2] }, { items: [3, 4] });
// => { items: [3, 4] }

Use Cases​

Merge with override precedence 📌​

Merge objects recursively where the second object (right) overrides the first. Essential for applying configuration overrides or patching state.

const finalConfig = mergeDeepRight(defaultConfig, userConfig);
// userConfig overrides defaults

Patch complex state​

Apply a partial update to a deep state tree. Critical for reducer logic in state management.

const nextState = mergeDeepRight(currentState, {
  ui: { sidebar: { isOpen: true } } // Only updates isOpen, preserves other ui props
});

Combine nested defaults​

Merge layers of configuration where inner layers override outer ones.

const effective = mergeDeepRight(globalProps, localProps);

Apply user theme overrides to a design system​

Merge user color preferences over the default design system theme. Essential for white-label products and customizable design systems.

const defaultTheme = {
  colors: { primary: "#3b82f6", secondary: "#6b7280", bg: "#fff", text: "#111" },
  fonts: { body: "Inter", heading: "Inter", mono: "Fira Code" },
  radii: { sm: "4px", md: "8px", lg: "16px" },
};

const brandOverrides = {
  colors: { primary: "#e11d48", secondary: "#be123c" },
  fonts: { heading: "Playfair Display" },
};

const brandTheme = mergeDeepRight(defaultTheme, brandOverrides);
// colors.bg = "#fff" (preserved), colors.primary = "#e11d48" (overridden)
// fonts.body = "Inter" (preserved), fonts.heading = "Playfair Display" (overridden)

Merge CI/CD pipeline overrides per environment​

Apply environment-specific overrides to a base CI configuration. Critical for multi-environment deployment pipelines.

const basePipeline = {
  build: { command: "pnpm build", env: { NODE_ENV: "production" } },
  test: { command: "pnpm test", timeout: 60000 },
  deploy: { provider: "aws", region: "us-east-1", replicas: 2 },
};

const stagingOverrides = {
  deploy: { region: "eu-west-1", replicas: 1 },
  test: { timeout: 120000 },
};

const stagingPipeline = mergeDeepRight(basePipeline, stagingOverrides);
// deploy.provider = "aws" (preserved), deploy.region = "eu-west-1" (overridden)