Avoid array mutations

Always clone arrays before performing operations that would mutate the original array, especially when working with component state or props. Direct mutations can cause subtle bugs and unexpected side effects in React applications.

copy reviewer prompt

Prompt

Reviewer Prompt
Deploy Agent

Always clone arrays before performing operations that would mutate the original array, especially when working with component state or props. Direct mutations can cause subtle bugs and unexpected side effects in React applications.

Common mutating operations to avoid:

  • Using sort(), reverse(), or splice() directly on state arrays
  • Calling push(), pop(), shift() or unshift() on existing arrays

Instead, create a copy first:

// ❌ Avoid: This mutates the original array
messagePlaceholders.sort((a, b) => { ... });

// ✅ Better: Create a copy before sorting
messagePlaceholders.slice().sort((a, b) => { ... });
// or
[...messagePlaceholders].sort((a, b) => { ... });

For comparing sorted arrays:

// ❌ Avoid: This mutates both arrays during comparison
JSON.stringify(selectedLabels.sort()) !== JSON.stringify(prompt.labels.sort())

// ✅ Better: Create copies before sorting
JSON.stringify([...selectedLabels].sort()) !== JSON.stringify([...prompt.labels].sort())

When accessing array elements, prefer direct indexing over chained methods that create unnecessary intermediate arrays:

// ❌ Avoid: Creates an intermediate copy unnecessarily
widget.data.dimensions.slice().shift()?.field ?? "none";

// ✅ Better: Direct access is clearer and more efficient
widget.data.dimensions[0]?.field ?? "none";

Source discussions