title: How do you destructure a React useState hook into a namespace?
body: <p>As a personal preference I wrap React props in namespaces. It helps me organize where different props come from.  </p>
  
  <p>With the <code>useState</code> hook I'm doing this.  </p>
  
  <pre><code>function MyComponent() {
    const [todoCount, setTodoCount] = useState(100);
    const [doneCount, setDoneCount] = useState(0);
    const myState = {
      todoCount,
      setTodoCount,
      doneCount,
      setDoneCount
    };
  
    return (
      &lt;&gt;
        &lt;Text&gt;Todo {myState.todoCount}&lt;/Text&gt;
        &lt;Text&gt;Done {myState.doneCount}&lt;/Text&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>Is there a more succinct syntax for state setup?  </p>
  
  <p>My failed attempt was</p>
  
  <pre><code>const myState = {
    [todoCount, setTodoCount]: useState(100),
    [doneCount, setDoneCount]: useState(0);
  };
  </code></pre>