Functional State Initialization

If you call a function to compute the initial value with useState(), the function will be executed on every render.
RESETRUNFULL

function Example() {
   const f = n=>{console.log('firing '+n); return n;};
   const [a, setA] = React.useState(f(0));           // calling a function
   const [b, setB] = React.useState(()=>f(1));    // passing a raw function
   return (<div><p>{a} {b}</p>
                <button onClick={() => {setA(a+1);}}>firing f(0) on every render</button>
                                <button onClick={() => {setB(b+1);}}>firing f(1) on first render only</button>
                                   </div>);}ReactDOM.render(<Example/>,document.querySelector("div"));

function Example() {
   const f = n=>{console.log('firing '+n); return n;};
   const [a, setA] = React.useState(f(0));           // calling a function
   const [b, setB] = React.useState(()=>f(1));    // passing a raw function
   return (<div><p>{a} {b}</p>
                <button onClick={() => {setA(a+1);}}>firing f(0) on every render</button>
                                <button onClick={() => {setB(b+1);}}>firing f(1) on first render only</button>
                                   </div>);}ReactDOM.render(<Example/>,document.querySelector("div"));

If you update a State Hook to the same value (true Object.is(a,b)) as the current state, React will bail out without rendering the children or firing effects.

MENU

Functional State Initialization