title: Is there a way to modify a value when its changed after rendering without useEffect
body: <p>I have a react app that fetches the data that I need on render.
  When the data arrives, I have a <code>useEffect</code> in place that will format the data and update the variable required.</p>
  <p>My issue now is that the format function that we are using has been changed to a hook, which I can't use in the useEffect anymore, and I was wondering if there was a way to basically replicate the process without the <code>useEffect</code></p>
  <p>For a simplified example, originally I had something similar to this component:</p>
  <pre><code>const MyComponent = ({myValue}) =&gt; {
      const [outputVal, setOutputVal] = useState(0);
  
      useEffect(() =&gt; {
          if (myValue != null) setOutputVal(formatCurrency(myValue));
      }, [myValue]);
  
  [...]
  </code></pre>
  <p><code>formatCurrency</code> was a simple function using the <code>Intl.NumberFormat</code> functionality, and would just convert the value as needed. I've now swapped to using the <code>react-i18next</code> library, which has other functionality that I want, but it uses hooks, which means I can't use the function within the <code>useEffect</code>.</p>
  <p>I've tried to change it to use the function when the page loads, ie:</p>
  <pre><code>const [outputVal, setOutputVal] = useState(formatCurrency(myValue));
  </code></pre>
  <p>The issue that I've found though is that the initial value of <code>myValue</code> is null, and the function doesn't rerun when <code>myValue</code> is updated.</p>
  <p>Any help or info on this would be great.</p>