is it possible to React.useState(() => {}) in React? : <p>is it possible to use a <code>function</code> as my React Component's state ?</p>

<p>example code here:</p>

<pre><code>// typescript 
type OoopsFunction = () =&gt; void;

export function App() {
    const [ooops, setOoops] = React.useState&lt;OoopsFunction&gt;(
        () =&gt; console.log('default ooops')
    );

    return (
        &lt;div&gt;
            &lt;div onClick={ ooops }&gt;
                Show Ooops
            &lt;/div&gt;

            &lt;div onClick={() =&gt; {
                setOoops(() =&gt; console.log('other ooops'))
            }}&gt;
                change oops
            &lt;/div&gt;
        &lt;/div&gt;
    )
}
</code></pre>

<p>but it doesn't works ... the <code>defaultOoops</code> will be invoked at very beginning, and when clicking <code>change oops</code>, the <code>otrher ooops</code> will be logged to console immediately not logging after clicking <code>Show Ooops</code> again.</p>

<p>why ?</p>

<p>is it possible for me to use a function as my component's state ? </p>

<p>or else React has its special ways to process such <code>the function state</code> ? </p>
