title: React hooks useState with props destructuring fails
body: <p>I'm using React hooks and trying to set the initial state of a constant inside a component with the passed down <code>props</code>. I've seen multiple <a href="https://stackoverflow.com/a/54626764/3909890">examples of this online</a>, but when I do it, the array destructuring returns the whole <code>props</code> object, not the instance I want.</p>
  
  <pre><code>Import React, {useState} from "react";
  
  const MyComponent = (props) =&gt; {
     console.log(props) // {date: "2019-11-26", task: "cooking"}
     const [date, setDate] = useState(props);
     console.log(date) // {date: "2019-11-26, task: "cooking"}
  
     return (...)
  }
  
  export default MyComponent;
  </code></pre>
  
  <p>I'd assume that with object/array destructuring the value of <code>date</code> would automatically be assigned the value from <code>props</code> (the string <code>"2019-11-26"</code>), not the whole <code>props</code> object. What am I missing? I can get around this by setting <code>const [date, setDate] = useState(props.date)</code> but that breaks eslints react plugins <a href="https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md" rel="nofollow noreferrer">destructuring rule</a> and I'd like to avoid it. </p>
  
  <p><strong>Edit</strong> </p>
  
  <p>Thanks to <a href="https://stackoverflow.com/users/8852158/helloitsjoe">helloitsjoe</a> for an <a href="https://stackoverflow.com/a/59051470/3909890">answer</a> that solves my problem!</p>