title: React State producing strange result on first state change
body: <p>I am trying to create a basic square foot calculator using React State and am running into something I've not seen before. I'm sure it is something I'm not pervy to yet but would like to know if this is expected or not.</p>
  <p>My goal here is when a user enters in a price I'd like to calculate that in real-time. So far, it is able to do this. HOWEVER, when I first load the page and enter in a set of numbers, for example, 5 in the width and 5 in the length - I get NaN printed to the console. Only after I enter a second number like 55 and 55, will it do the calculation and print it to the console.</p>
  <p>I had suspected it has something to do with the initial state so instead of <code>useState()</code> I switched it to <code>useState(0)</code>. Instead of producing <code>NaN</code> I get <code>0</code> printed to the console after each number I enter. Again, If I enter 55 and 55 it does the calculation. Why is this and how can I avoid this?</p>
  <pre><code>const PPSQ = 12;
  
  const [width, setWidth] = useState()
  const [length, setLength] = useState()
  
  function calculate() {
      console.log((width * length) * PPSQ);
  }
  
  function getWidth(val) {
      setWidth(val.target.value)
      calculate()
  }
  
  function getLength(val) {
      setLength(val.target.value)
      calculate()
  }
  
  &lt;input
  className=&quot;form-control&quot;
  id=&quot;length&quot;
  name=&quot;length&quot;
  placeholder=&quot;Length&quot;
  type=&quot;number&quot;
  onChange={getLength}
  autoComplete=&quot;off&quot;
  required
  /&gt;
  
  &lt;input
  className=&quot;form-control&quot;
  id=&quot;width&quot;
  name=&quot;width&quot;
  placeholder=&quot;Width&quot;
  type=&quot;number&quot;
  onChange={getWidth}
  autoComplete=&quot;off&quot;
  required
  /&gt;
  </code></pre>