Huge React State Array with Hundreds of Inputs, slow state changes onChange

Created example with similar functional components and dummy data:

https://codesandbox.io/s/recursing-cdn-q4vx0

Have to create Child component with local item state and sync with main array. Added Delete and Add.

Work with object arrays as your sample.

I'd minimize the re-renders, so I'd do following:

1. Keep all functions in parent and share memoized callback to avoid redundant function constructions
2. Do not use indexes to figure out specific children
3. Memoize the children

You can check out the code with implemented removal by the link https://codesandbox.io/s/loving-rgb-cejoy?fontsize=14&hidenavigation=1&theme=dark&file=/src/Parent.jsx

That way, you reduce the re-renders almost to zero and you're good to go until you face the penalties of copying and rendering really large arrays which I guess you are not likely to run into

Copying large arrays shouldn't be the culprit, it only copies object references which is usually very fast, not an actual deep copy. In fact, Redux itself does it this way.

The reason you're experiencing this lag is you didn't set keys to the children. You should set unique keys and don't use the index as the key.