refactor: remove usage of clone deep

webiny · brunozoric · Apr 10, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
commit 36c957c4a83503d063ebf89d4c129bd547a965c3
diff --git a/packages/api-aco/src/utils/ListCache.ts b/packages/api-aco/src/utils/ListCache.ts
@@ -1,5 +1,3 @@
-import cloneDeep from "lodash/cloneDeep.js";
-
 export type Constructor<T> = new (...args: any[]) => T;
 
 export interface IListCachePredicate<T> {
@@ -34,7 +32,7 @@ export class ListCache<T> implements IListCache<T> {
     }
 
     getItems(): T[] {
-        return cloneDeep(this.state);
+        return structuredClone(this.state);
     }
 
     addItems(items: T[]): void {

diff --git a/packages/api-core/src/features/security/roles/shared/decorators/ListCache.ts b/packages/api-core/src/features/security/roles/shared/decorators/ListCache.ts
@@ -1,5 +1,3 @@
-import cloneDeep from "lodash/cloneDeep.js";
-
 export type Constructor<T> = new (...args: any[]) => T;
 
 export interface IListCachePredicate<T> {
@@ -34,7 +32,7 @@ export class ListCache<T> implements IListCache<T> {
     }
 
     getItems(): T[] {
-        return cloneDeep(this.state);
+        return structuredClone(this.state);
     }
 
     addItems(items: T[]): void {

diff --git a/packages/app-aco/src/components/AdvancedSearch/domain/FilterRepository.ts b/packages/app-aco/src/components/AdvancedSearch/domain/FilterRepository.ts
@@ -1,7 +1,5 @@
-import cloneDeep from "lodash/cloneDeep.js";
-import { makeAutoObservable, runInAction } from "mobx";
+import { makeAutoObservable, observable, runInAction, toJS } from "mobx";
 import { mdbid } from "@webiny/utils";
-
 import type { FilterDTO } from "../domain/index.js";
 import { FilterMapper, Loading, Sorter } from "../domain/index.js";
 import type { FiltersGatewayInterface } from "../gateways/index.js";
@@ -10,19 +8,20 @@ export class FilterRepository {
     private gateway: FiltersGatewayInterface;
     private sorter: Sorter<FilterDTO>;
     private loading: Loading;
-    private filters: FilterDTO[] = [];
+    private filters;
     public readonly namespace: string;
 
     constructor(gateway: FiltersGatewayInterface, namespace: string) {
         this.gateway = gateway;
         this.loading = new Loading();
         this.namespace = namespace;
+        this.filters = observable.array<FilterDTO>([]);
         this.sorter = new Sorter(["createdOn_DESC"]);
         makeAutoObservable(this);
     }
 
     getFilters() {
-        return cloneDeep(this.filters);
+        return structuredClone(toJS(this.filters));
     }
 
     getLoading() {
@@ -58,15 +57,23 @@ export class FilterRepository {
         }
 
         runInAction(() => {
-            this.filters = this.sorter.sort(response.map(filter => FilterMapper.toDTO(filter)));
+            this.filters.replace(
+                this.sorter.sort(
+                    response.map(filter => {
+                        return FilterMapper.toDTO(filter);
+                    })
+                )
+            );
         });
     }
 
     async getFilterById(id: string) {
-        const filterInCache = this.filters.find(filter => filter.id === id);
+        const filterInCache = this.filters.find(filter => {
+            return filter.id === id;
+        });
 
         if (filterInCache) {
-            return cloneDeep(filterInCache);
+            return structuredClone(toJS(filterInCache));
         }
 
         const response = await this.runWithLoading<FilterDTO>(this.gateway.get(id));
@@ -77,10 +84,10 @@ export class FilterRepository {
 
         const filterDTO = FilterMapper.toDTO(response);
         runInAction(() => {
-            this.filters = this.sorter.sort([filterDTO, ...this.filters]);
+            this.filters.replace(this.sorter.sort([filterDTO, ...toJS(this.filters)]));
         });
 
-        return cloneDeep(filterDTO);
+        return structuredClone(toJS(filterDTO));
     }
 
     async createFilter(filter: FilterDTO) {
@@ -99,10 +106,10 @@ export class FilterRepository {
 
         const filterDTO = FilterMapper.toDTO(response);
         runInAction(() => {
-            this.filters = this.sorter.sort([filterDTO, ...this.filters]);
+            this.filters.replace(this.sorter.sort([filterDTO, ...toJS(this.filters)]));
         });
 
-        return cloneDeep(filterDTO);
+        return structuredClone(toJS(filterDTO));
     }
 
     async updateFilter(filter: FilterDTO) {
@@ -122,14 +129,17 @@ export class FilterRepository {
             const filterDTO = FilterMapper.toDTO(response);
 
             runInAction(() => {
-                this.filters = this.sorter.sort([
-                    ...this.filters.slice(0, filterIndex),
-                    {
-                        ...this.filters[filterIndex],
-                        ...filterDTO
-                    },
-                    ...this.filters.slice(filterIndex + 1)
-                ]);
+                const filters = toJS(this.filters);
+                this.filters.replace(
+                    this.sorter.sort([
+                        ...filters.slice(0, filterIndex),
+                        {
+                            ...filters[filterIndex],
+                            ...filterDTO
+                        },
+                        ...filters.slice(filterIndex + 1)
+                    ])
+                );
             });
         }
     }
@@ -149,7 +159,9 @@ export class FilterRepository {
 
         if (response) {
             runInAction(() => {
-                this.filters = this.sorter.sort(this.filters.filter(filter => filter.id !== id));
+                this.filters.replace(
+                    this.sorter.sort(toJS(this.filters.filter(filter => filter.id !== id)))
+                );
             });
         }
     }

diff --git a/packages/app-admin/src/components/IconPicker/IconRepository.ts b/packages/app-admin/src/components/IconPicker/IconRepository.ts
@@ -1,6 +1,4 @@
-import cloneDeep from "lodash/cloneDeep.js";
-import { makeAutoObservable, runInAction } from "mobx";
-
+import { makeAutoObservable, runInAction, toJS } from "mobx";
 import { Loading } from "./Loading.js";
 import type { IconPackProviderInterface as IconPackProvider, IconType } from "./config/index.js";
 import type { Icon } from "./types.js";
@@ -39,7 +37,7 @@ export class IconRepository {
     }
 
     getIcons() {
-        return cloneDeep(this.icons);
+        return structuredClone(toJS(this.icons));
     }
 
     addIcon(icon: Icon) {

diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import cloneDeep from "lodash/cloneDeep.js";
 import type { FormOnSubmit } from "@webiny/form";
 import { Form } from "@webiny/form";
 import { i18n } from "@webiny/app/i18n/index.js";
@@ -14,7 +13,7 @@ import { EditFieldDrawerContainer } from "./EditFieldDrawerContainer.js";
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
 
 function setupState(field: CmsModelField, contentModel: CmsEditorContentModel): EditFieldState {
-    const clonedField = cloneDeep(field);
+    const clonedField = structuredClone(field);
 
     if (!clonedField.renderer || !clonedField.renderer.name) {
         const [renderPlugin] = useRendererPlugins();

diff --git a/...ess-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidatorsList.tsx b/...ess-cms/src/admin/components/FieldEditor/EditFieldDialog/ValidationTab/ValidatorsList.tsx
@@ -1,6 +1,5 @@
 import React, { Fragment } from "react";
 import { css } from "@emotion/css";
-import cloneDeep from "lodash/cloneDeep.js";
 import debounce from "lodash/debounce.js";
 import { plugins } from "@webiny/plugins";
 import { Switch } from "@webiny/ui/Switch/index.js";
@@ -68,10 +67,10 @@ const onEnabledChange = (params: OnEnabledChangeParams): void => {
 };
 
 const onFormChange = debounce(({ data, validationValue, onChangeValidation, validatorIndex }) => {
-    const newValidationValue = cloneDeep(validationValue);
+    const newValidationValue = structuredClone(validationValue);
     newValidationValue[validatorIndex] = {
         ...newValidationValue[validatorIndex],
-        ...cloneDeep(data)
+        ...structuredClone(data)
     };
     onChangeValidation(newValidationValue);
 }, 200);

diff --git a/...s/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx b/...s/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import cloneDeep from "lodash/cloneDeep.js";
 import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import { ReactComponent as CloneIcon } from "@webiny/icons/library_add.svg";
 import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
@@ -210,7 +209,7 @@ export const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {
     };
 
     const cloneValue = (value: TemplateValue, index: number) => {
-        bind.appendValue(cloneDeep(value), index + 1);
+        bind.appendValue(structuredClone(value), index + 1);
     };
 
     const values: TemplateValue[] = bind.value || [];

diff --git a/packages/app-utils/src/features/List/ListQueryParamsRepository.ts b/packages/app-utils/src/features/List/ListQueryParamsRepository.ts
@@ -1,4 +1,4 @@
-import { makeAutoObservable, runInAction } from "mobx";
+import { makeAutoObservable, runInAction, toJS } from "mobx";
 import {
     ListQueryParamsRepository as Abstraction,
     type BaseListParams,
@@ -75,7 +75,7 @@ export class ListQueryParamsRepositoryImpl<TParams extends BaseListParams>
     }
 
     private clone(value: TParams): TParams {
-        return structuredClone ? structuredClone(value) : JSON.parse(JSON.stringify(value));
+        return structuredClone(toJS(value));
     }
 }
 

diff --git a/packages/pulumi/package.json b/packages/pulumi/package.json
@@ -17,8 +17,7 @@
   "dependencies": {
     "@pulumi/pulumi": "^3.230.0",
     "@webiny/project": "0.0.0",
-    "find-up": "^8.0.0",
-    "lodash": "^4.18.1"
+    "find-up": "^8.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.24",

diff --git a/packages/pulumi/src/createPulumiApp.ts b/packages/pulumi/src/createPulumiApp.ts
@@ -22,7 +22,6 @@ import type {
     ResourceHandler
 } from "~/types.js";
 import type { PulumiAppRemoteResource } from "~/PulumiAppRemoteResource.js";
-import cloneDeep from "lodash/cloneDeep.js";
 import { DEFAULT_PROD_ENV_NAMES } from "./constants.js";
 
 export function createPulumiApp<TResources extends Record<string, unknown>>(
@@ -256,7 +255,7 @@ function createPulumiAppResourceConfigProxy<T extends object>(obj: T) {
     return new Proxy(obj, {
         get(target, p: string) {
             if (p === "clone") {
-                return () => cloneDeep(obj);
+                return () => structuredClone(obj);
             }
 
             type V = T[keyof T];

diff --git a/yarn.lock b/yarn.lock
@@ -15026,7 +15026,6 @@ __metadata:
     "@webiny/build-tools": "npm:0.0.0"
     "@webiny/project": "npm:0.0.0"
     find-up: "npm:^8.0.0"
-    lodash: "npm:^4.18.1"
     rimraf: "npm:^6.1.3"
     typescript: "npm:5.9.3"
   languageName: unknown