title: Handling children state in an arbitrary JSON tree
body: <p>This is more of a brainstorming question as I can't really seem to come up with a good solution.</p>
  
  <p>I have a component which renders a tree based on some passed JSON (stored at the top level). Each node of the tree can have 0..n children and maps to a component defined by the JSON of that node (can be basically anything is the idea). The following is just an example and the names don't mean anything specific. Don't pay too much attention to the names and why a UserList might have children that could be anything.</p>
  
  <pre><code>JSON: {
    data: {}
    children: [
      {
        data: {}
        children: []
      },
      {
        data: {}
        children: []
      },
      {
        data: {}
        children: [
          {
            data: {}
            children: []
          },
          ...etc
        ]
      },
    ]
  }
  </code></pre>
  
  <pre><code>const findComponent = (props) =&gt; {
    if (props.data.name === "userSelector") {
      return &lt;UserSelectorNode {...props}&gt;;
    } else if (props.data.name === "userInformation") {
      return &lt;UserInformationNode{...props}&gt;; // example of what might be under a userSelectorNode
    }
    ...etc
  };
  </code></pre>
  
  <pre><code>// render a user selector and children
  const UserSelectorNode = (props) =&gt; {
    const [selected, setSelected] = React.useState([])
  
    // other methods which can update the JSON when selected changes...
  
    return (
      &lt;div&gt;
        &lt;UserSelector selected={selected}/&gt; // does a getUser() server request internally
        &lt;div&gt;
          {props.data.children.map((child) =&gt; findComponent(child))}
        &lt;div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>This tree can be modified at any level (add/remove/edit). Adding/Editing is easy. The problem is remove operations.</p>
  
  <p>Some children components use existing components which do things like getting a list of users and displaying them in a list (stored in state I have no access to). When a node on the tree is removed new components are made for every node that has to shift (JSON at the index is now different), which can be a lot. This causes a bunch of requests to occur again and sometimes state can be lost entirely (say the page number of a table to view users).</p>
  
  <p>I'm pretty sure there is no way for the "new" UserSelector created when the JSON shifts to keep the same state, but I figured I may as well ask if anyone has dealt with anything similar and how they went about designing it.</p>
  
  <p>The only way I can think of is to not actually reuse any components and re implement them with state stored somewhere else (which would suck), or rewrite everything to be able to take internal state as well as an external state storage if required.</p>
  
  <p>EDIT: Added Sandbox
  <a href="https://codesandbox.io/s/focused-thunder-neyxf" rel="nofollow noreferrer">https://codesandbox.io/s/focused-thunder-neyxf</a>. Threw it together pretty quick to only get a single layer of remove working which shows the problem.</p>