Arrays Proxied When Passed to Child Components

When you pass an array to a child component, Lightning Locker wraps the array in a proxy.

JavaScript Proxy is used on arrays that are passed to nested components. If you pass an array from a parent component to several layers of nested components, the array is proxied multiple times. When an array consists of many objects, multiple proxies cause a negative performance impact when running functions such as JSON.stringify on the array. A page that’s using a component that passes a large array of objects through layers of child components can become unresponsive.

To limit the negative performance impact of processing large arrays, refactor your code using one of these approaches.

• Avoid passing large arrays of objects more than one level down. For example, pass an array from parent to child but no further.
• Divide your data into multiple smaller arrays in the parent component.

Lightning Web Security (LWS) doesn’t have this limitation.

See Also

• How Lightning Locker Uses the Proxy Object