score:15

Accepted answer

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.

score:1

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

score:1

You have 2 options:

  1. Add key to the Child, e.g., email, firstName, lastName, allowing React to only re-render changed input(s). Prefer not to use index for the key, otherwise inserting/deleting item at the being of the state array will cause the entire list to re-render

    {state.map((item, index) => (
      <Child
        // e.g., email, firstName, lastName, prefer not to use `index`
        key={item.name}
        value={item.content}
        index={index}
        onChange={onInputChange}
      />
    ))}
    
  2. As you mention the state array is huge, you should not use .map() anymore, instead you should utilise libraries such as react-virtualized, which will only render visible elements to the DOM and greatly improve your performance.

score:4

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.


Related Query

More Query from same tag