React Components re mounting unexpectedly

Question

My core issue is that a have a bunch of child elements that are generated from data that's stored in a data store. The elements have input boxes that fill with the initial data, but are independently controlled. Changing the contents of the input does not, and should not update the data, I just want the component to track it it's self.

I have made a simplified reproduceable example here: https://codesandbox.io/s/xenodochial-ride-k0oxkc?file=/src/App.js

The steps to reproduce are:

• Edit the third text box to say anything different.
• Press the delete button

The delete button deletes the first element in the data store, removing the first select box from the DOM, but the value of the third text box will have reset to the original value, indicating that the whole child component was remounted.

(There is some weird behavior going on in the sandbox, pressing the delete button has no effect until modify the source file once. You don't even have to save the change, just making any change seems to prompt the sandbox to redraw. I don't know why this is, it does not happen in my local environment.)

I believe the cause of my issue is in how I manage my data store. While I've moved ahead to using react hooks in almost every case now, my data store solution hasn't changed in the last 5 years. I still use a class component for my top level component that passes down data from the store to other hooks automatically when any new data is received. I've tried wrapping my child component in a React memo

export default React.memo(props => <ChildItem />)

But it wasn't making any different. I'm guessing there is some kind of mutability issue going on here that I don't understand.

How can I make it so only child components whose props change, or even make it so that the child components will only render once initially? Is there some way I can convert my App.js to be a hook and still work with my existing data store solution that would solve this issue?

I'm just kind of lost here.

Answer 1

Switch over to export default React.memo(ChildItem) when exporting the component from ChildItem.js . Ex:

import React from 'react';
import { Input } from "antd";

const ChildItem = ({ data }) => {
  return (
    <div className="package-container">
      <Input defaultValue={data.text} />
    </div>
  );
}

export default React.memo(ChildItem);