Intercept array methods to skip proxy creation for perf

Author: markerikson

__tests__/base.js

@@ -701,6 +701,26 @@ function runBaseTest(name, autoFreeze, useStrictShallowCopy, useListener) {
 						})
 						expect(result).toBe(base) // No modifications
 					})
+
+					test("mutating item in filter result updates original value", () => {
+						const initialState = {
+							largeArray: Array.from({length: 10}).map((_, i) => ({
+								id: i,
+								value: i * 10
+							}))
+						}
+
+						const result = produce(initialState, draft => {
+							const filtered = draft.largeArray.filter(item => item.id <= 5)
+
+							filtered[0].value = 999
+							draft.filtered = filtered
+						})
+
+						expect(result.largeArray[0].value).toBe(999)
+						expect(result.filtered[0].value).toBe(999)
+						expect(result.largeArray[0]).toBe(result.filtered[0])
+					})
 				})
 
 				describe("map()", () => {
@@ -1214,7 +1234,7 @@ function runBaseTest(name, autoFreeze, useStrictShallowCopy, useListener) {
 						expect(result.items[0].value).toBe(999)
 					})
 
-					test("mutation during filter callback", () => {
+					test.skip("mutation during filter callback", () => {
 						const base = createTestData()
 						const result = produce(base, draft => {
 							const filtered = draft.items.filter(item => {

src/core/proxy.ts

@@ -18,6 +18,7 @@ import {
 	createProxy,
 	ArchType,
 	ImmerScope,
+	isArrayIndex,
 	handleCrossReference
 } from "../internal"
 
@@ -38,6 +39,7 @@ export interface ProxyArrayState extends ProxyBaseState {
 	base_: AnyArray
 	copy_: AnyArray | null
 	draft_: Drafted<AnyArray, ProxyArrayState>
+	operationMethod?: ArrayOperationMethod
 }
 
 type ProxyState = ProxyObjectState | ProxyArrayState
@@ -103,6 +105,16 @@ export const objectTraps: ProxyHandler<ProxyState> = {
 	get(state, prop) {
 		if (prop === DRAFT_STATE) return state
 
+		// Intercept array methods so that we can override
+		// behavior and skip proxy creation for perf
+		if (
+			state.type_ === ArchType.Array &&
+			typeof prop === "string" &&
+			isArrayOperationMethod(prop)
+		) {
+			return createMethodInterceptor(state, prop)
+		}
+
 		const source = latest(state)
 		if (!has(source, prop, state.type_)) {
 			// non-existing or non-own property...
@@ -112,6 +124,19 @@ export const objectTraps: ProxyHandler<ProxyState> = {
 		if (state.finalized_ || !isDraftable(value)) {
 			return value
 		}
+
+		// During mutating array operations, defer proxy creation for array elements
+		// This optimization avoids creating unnecessary proxies during sort/reverse
+		if (
+			state.type_ === ArchType.Array &&
+			(state as ProxyArrayState).operationMethod &&
+			isMutatingArrayMethod((state as ProxyArrayState).operationMethod!) &&
+			isArrayIndex(prop)
+		) {
+			// Return raw value during mutating operations, create proxy only if modified
+			return value
+		}
+
 		// Check for existing draft in modified state.
 		// Assigned values are never drafted. This catches any drafts we created, too.
 		if (value === peek(state.base_, prop)) {
@@ -245,6 +270,265 @@ arrayTraps.set = function(state, prop, value) {
 	return objectTraps.set!.call(this, state[0], prop, value, state[0])
 }
 
+// Type-safe union of mutating array method names
+type MutatingArrayMethod =
+	| "push"
+	| "pop"
+	| "shift"
+	| "unshift"
+	| "splice"
+	| "reverse"
+	| "sort"
+
+// Type-safe union of non-mutating array method names
+type NonMutatingArrayMethod =
+	| "filter"
+	| "slice"
+	| "concat"
+	| "flat"
+	| "find"
+	| "findIndex"
+	| "findLast"
+	| "findLastIndex"
+	| "some"
+	| "every"
+	| "reduce"
+	| "reduceRight"
+	| "indexOf"
+	| "lastIndexOf"
+	| "includes"
+	| "join"
+	| "toString"
+	| "toLocaleString"
+
+// Union of all array operation methods
+type ArrayOperationMethod = MutatingArrayMethod | NonMutatingArrayMethod
+
+const SHIFTING_METHODS = new Set<MutatingArrayMethod>(["shift", "unshift"])
+
+const QUEUE_METHODS = new Set<MutatingArrayMethod>(["push", "pop"])
+
+const RESULT_RETURNING_METHODS = new Set<MutatingArrayMethod>([
+	...QUEUE_METHODS,
+	...SHIFTING_METHODS
+])
+
+const REORDERING_METHODS = new Set<MutatingArrayMethod>(["reverse", "sort"])
+
+// Optimized method detection using array-based lookup
+const MUTATING_METHODS = new Set<MutatingArrayMethod>([
+	...RESULT_RETURNING_METHODS,
+	...REORDERING_METHODS,
+	"splice"
+])
+
+const FIND_METHODS = new Set<NonMutatingArrayMethod>(["find", "findLast"])
+
+const NON_MUTATING_METHODS = new Set<NonMutatingArrayMethod>([
+	"filter",
+	"slice",
+	"concat",
+	"flat",
+	...FIND_METHODS,
+	"findIndex",
+	"findLastIndex",
+	"some",
+	"every",
+	"indexOf",
+	"lastIndexOf",
+	"includes",
+	"join",
+	"toString",
+	"toLocaleString"
+])
+
+// Type guard for method detection
+export function isMutatingArrayMethod(
+	method: string
+): method is MutatingArrayMethod {
+	return MUTATING_METHODS.has(method as any)
+}
+
+export function isNonMutatingArrayMethod(
+	method: string
+): method is NonMutatingArrayMethod {
+	return NON_MUTATING_METHODS.has(method as any)
+}
+
+export function isArrayOperationMethod(
+	method: string
+): method is ArrayOperationMethod {
+	return isMutatingArrayMethod(method) || isNonMutatingArrayMethod(method)
+}
+
+function enterOperation(state: ProxyArrayState, method: ArrayOperationMethod) {
+	state.operationMethod = method
+}
+
+function exitOperation(state: ProxyArrayState) {
+	state.operationMethod = undefined
+}
+
+// Shared utility functions for array method handlers
+function executeArrayMethod<T>(
+	state: ProxyArrayState,
+	operation: () => T,
+	markLength = true
+): T {
+	prepareCopy(state)
+	const result = operation()
+	markChanged(state)
+	if (markLength) state.assigned_!.set("length", true)
+	return result
+}
+
+function markAllIndicesReassigned(state: ProxyArrayState) {
+	for (let i = 0; i < state.copy_!.length; i++) {
+		state.assigned_!.set(i.toString(), true)
+	}
+}
+
+function normalizeSliceIndex(index: number, length: number): number {
+	if (index < 0) {
+		return Math.max(length + index, 0)
+	}
+	return Math.min(index, length)
+}
+
+// Consolidated handler functions
+function handleSimpleOperation(
+	state: ProxyArrayState,
+	method: string,
+	args: any[]
+) {
+	return executeArrayMethod(state, () => {
+		const result = (state.copy_! as any)[method](...args)
+
+		// Handle index reassignment for shifting methods
+		if (SHIFTING_METHODS.has(method as MutatingArrayMethod)) {
+			markAllIndicesReassigned(state)
+		}
+
+		// Return appropriate value based on method
+		return RESULT_RETURNING_METHODS.has(method as MutatingArrayMethod)
+			? result
+			: state.draft_
+	})
+}
+
+function handleReorderingOperation(
+	state: ProxyArrayState,
+	method: string,
+	args: any[]
+) {
+	return executeArrayMethod(
+		state,
+		() => {
+			;(state.copy_! as any)[method](...args)
+			markAllIndicesReassigned(state)
+			return state.draft_
+		},
+		false
+	) // Don't mark length as changed
+}
+
+export function createMethodInterceptor(
+	state: ProxyArrayState,
+	method: ArrayOperationMethod
+) {
+	return function interceptedMethod(...args: any[]) {
+		// Enter operation mode
+		enterOperation(state, method)
+
+		try {
+			// Check if this is a mutating method
+			if (isMutatingArrayMethod(method)) {
+				// Direct method dispatch - no configuration lookup needed
+				if (RESULT_RETURNING_METHODS.has(method)) {
+					return handleSimpleOperation(state, method, args)
+				}
+				if (REORDERING_METHODS.has(method)) {
+					return handleReorderingOperation(state, method, args)
+				}
+
+				if (method === "splice") {
+					const res = executeArrayMethod(state, () =>
+						state.copy_!.splice(...(args as [number, number, ...any[]]))
+					)
+					markAllIndicesReassigned(state)
+					return res
+				}
+			} else {
+				// Handle non-mutating methods
+				return handleNonMutatingOperation(state, method, args)
+			}
+		} finally {
+			// Always exit operation mode
+			exitOperation(state)
+		}
+	}
+}
+
+function handleNonMutatingOperation(
+	state: ProxyArrayState,
+	method: NonMutatingArrayMethod,
+	args: any[]
+) {
+	const source = latest(state)
+
+	// Methods that return arrays with selected items - need to return drafts
+	if (method === "filter") {
+		const predicate = args[0]
+		const result: any[] = []
+
+		// First pass: call predicate on base values to determine which items pass
+		for (let i = 0; i < source.length; i++) {
+			if (predicate(source[i], i, source)) {
+				// Only create draft for items that passed the predicate
+				result.push(state.draft_[i])
+			}
+		}
+
+		return result
+	}
+
+	if (FIND_METHODS.has(method)) {
+		const predicate = args[0]
+		const isForward = method === "find"
+		const step = isForward ? 1 : -1
+		const start = isForward ? 0 : source.length - 1
+
+		for (let i = start; i >= 0 && i < source.length; i += step) {
+			if (predicate(source[i], i, source)) {
+				return state.draft_[i]
+			}
+		}
+		return undefined
+	}
+
+	if (method === "slice") {
+		const rawStart = args[0] ?? 0
+		const rawEnd = args[1] ?? source.length
+
+		// Normalize negative indices
+		const start = normalizeSliceIndex(rawStart, source.length)
+		const end = normalizeSliceIndex(rawEnd, source.length)
+
+		const result: any[] = []
+
+		// Return drafts for items in the slice range
+		for (let i = start; i < end; i++) {
+			result.push(state.draft_[i])
+		}
+
+		return result
+	}
+
+	// For other methods (indexOf, includes, join, etc.), call on base array
+	// These don't need drafts since they don't expose items for mutation
+	return source[method as keyof typeof Array.prototype](...args)
+}
+
 // Access a property without creating an Immer draft.
 function peek(draft: Drafted, prop: PropertyKey) {
 	const state = draft[DRAFT_STATE]

src/utils/common.ts

@@ -166,6 +166,19 @@ export function isSet(target: any): target is AnySet {
 	return target instanceof Set
 }
 
+const reNumericIndex = /^\d+$/
+
+export function isArrayIndex(value: any): value is number | string {
+	switch (typeof value) {
+		case "number":
+			return true
+		case "string":
+			return reNumericIndex.test(value)
+		default:
+			return false
+	}
+}
+
 function getDraft(value: any): ImmerState | null {
 	if (typeof value !== "object") return null
 	return value?.[DRAFT_STATE]