title: Storing complex React state
body: <p>I have a React state that needs to be accessed/modified by a real time WebSocket connection and also a nested child component.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import Editor from "component/Editor";
  
  function App() {
    let fileTreeData = [
      {
        id: 1,
        type: "directory",
        name: "Test Root",
        children: [
          { id: 2, type: "file", name: "Test 2" },
          {
            id: 3,
            type: "directory",
            name: "src",
            children: [
              { id: 4, type: "file", name: "index.js" },
              { id: 5, type: "file", name: "test.js" }
            ],
            expanded: false
          },
          { id: 6, type: "file", name: "Test" }
        ],
        expanded: true
      }
    ];
  
    return &lt;Editor fileTreeData={fileTreeData} /&gt;;
  }
  
  export default App;
  </code></pre>
  
  <p>How would I go about implementing this in React? Global state seems to be an anti-pattern.</p>