title: How to set a constant 'state' variable using hooks?
body: <p>Let's say I have some state variable <code>width</code>, and I know it will never change, but I need to run some computations on it based on a prop I receive. I don't want to do it in the body of the function, as it will run on every re-render. So:</p>
  
  <pre><code>const SOME_CONSTANT_NUMBER = 50;
  
  const someFunc = ({multiplier: number}) =&gt; {
    const [width, setWidth] = useState(SOME_CONSTANT_NUMBER * multiplier);
  
    return (
      &lt;div&gt;
        {width}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Now I've also instantiated a function <code>setWidth</code> that I will never use. </p>
  
  <p>I could use a hook to run only on mount, but that's more code and not necessary.</p>
  
  <pre><code>const SOME_CONSTANT_NUMBER = 50;
  
  const someFunc = ({multiplier: number}) =&gt; {
    const [width, setWidth] = useState(0);
  
    useHook(() =&gt; {
      const updatedWidth = SOME_CONSTANT_NUMBER * multiplier;
      setWidth(updatedWidth);
    }, []);
  
    return (
      &lt;div&gt;
        {width}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I think the worst approach would be below, as it will calculate it on every rerender:</p>
  
  <pre><code>const SOME_CONSTANT_NUMBER = 50;
  
  const someFunc = ({multiplier: number}) =&gt; {
    const width = SOME_CONSTANT_NUMBER * multiplier;
    return (
      &lt;div&gt;
        {width}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>*Note this example is simple, but assume there are much more props, and that the computation for this <code>width</code> is computationally heavy.</p>