title: Consequences of using computed variables vs useState/useEffect
body: <p>If I have a variable whose value can be fully derived based on the value of another property, is there any consequence/pitfall to initializing a computed variable vs using a combination of <code>useState</code>/<code>useEffect</code> to track the variable? Let me illustrate with a contrived example:</p>
  <pre class="lang-js prettyprint-override"><code>/**
   * ex paymentAmounts: [100, 300, 400]
   */
  const Option1 = ({paymentAmounts}) =&gt; {
    const [average, setAverage] = useState(paymentAmounts.reduce((acc, curr) =&gt; curr + acc, 0) / paymentAmounts.length)
  
    useEffect(() =&gt; {
      setAverage(paymentAmounts.reduce((acc, curr) =&gt; curr + acc, 0) / paymentAmounts.length)
    }, [paymentAmounts])
  
    return (
      &lt;div&gt;
        Average: {average}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>or more simply</p>
  <pre class="lang-js prettyprint-override"><code>/**
   * ex paymentAmounts: [100, 300, 400]
   */
  const Option2 = ({paymentAmounts}) =&gt; {
    const average = paymentAmounts.reduce((acc, curr) =&gt; curr + acc, 0) / paymentAmounts.length
  
    return (
      &lt;div&gt;
        Average: {average}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Am I giving up any control and/or React benefits by using Option2?</p>
  <p>Vue.js seems to have this option via <a href="https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties" rel="nofollow noreferrer">computed properties</a>.</p>