The count is {count}

) } `}}),` `,(0,t.jsx)(e.h2,{children:"Setting the Same Value"}),` `,(0,t.jsxs)(e.p,{children:["Whenever the ",(0,t.jsx)(e.code,{children:"setCount()"}),` function is called with a new value, the component will re-render in order to display the updated value. Note that this will only happen if the value passed to `,(0,t.jsx)(e.code,{children:"setCount()"})," is different from the current one."]}),` `,(0,t.jsx)(i,{files:{"/App.js":`import { useState } from 'react' export default function Counter() { console.log('component rerendered') const [count, setCount] = useState(5) return ( <>

The count is {count}

) }`}}),` `,(0,t.jsx)(e.h2,{children:"Setting State With a Function"}),` `,(0,t.jsxs)(e.p,{children:["The setter function returned by ",(0,t.jsx)(e.code,{children:"useState"})," can also take in a function where the argument is the previous state value:"]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:`setCount((previousCount) => previousCount + 1) `})}),` `,(0,t.jsx)(e.p,{children:`This is actually good practice when setting the state based on a previous value (even though I didn't do it in my other examples \u{1F62C}). The reason why this is good practice is that there can be unexpected state updates if there is a delay between the function call and the call to the setter. This is a bit complicated, so here's an example to better illustrate.`}),` `,(0,t.jsx)(o,{children:(0,t.jsxs)(e.p,{children:["Kent C Dodd's has ",(0,t.jsx)(e.a,{href:"https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates#dispatch-function-updates",children:`a great blog post`}),` about this that the following example is derived from`]})}),` `,(0,t.jsx)(e.p,{children:`In the example below, if you press the "Increment" button quickly three times (within the 500ms limit), you'll notice that the count only increments by one.`}),` `,(0,t.jsx)(i,{files:{"/App.js":`import { useState } from 'react' export default function DelayedCounter() { const [count, setCount] = useState(0) const increment = async () => { await new Promise(resolve => setTimeout(resolve, 500)) setCount(count + 1) } return ( <>

The count is {count}

) } `}}),` `,(0,t.jsxs)(e.p,{children:["In order to rectify this problem, we can use ",(0,t.jsx)(e.code,{children:"setCount(previousCount => previousCount + 1)"}),`. Try adding this to the example above to ensure that the button clicks increment the count correctly.`]}),` `,(0,t.jsx)(e.h2,{children:"Arguments"}),` `,(0,t.jsxs)(e.p,{children:["The ",(0,t.jsx)(e.code,{children:"useState"}),` hook takes in a single argument that sets the initial value of the state variable on first render. It can also, however, take in a function. If a function is passed it will `,(0,t.jsx)(e.a,{href:"https://reactjs.org/docs/hooks-reference.html#lazy-initial-state",children:"lazily initialize"}),` the initial value.`]}),` `,(0,t.jsx)(e.h2,{children:"Lazy Initialization"}),` `,(0,t.jsxs)(e.p,{children:["Lazy initialization is helpful when the initial value passed into the ",(0,t.jsx)(e.code,{children:"useState()"}),` hook is computationally expensive. To illustrate this concept, assume we have the following component.`]}),` `,(0,t.jsx)(i,{files:{"/App.js":`import { useState } from 'react' function expensiveComputation() { console.log("expensive computation ran") return 0 } export default function Counter() { const [count, setCount] = useState(expensiveComputation()) return ( <>

The count is {count}

) }`}}),` `,(0,t.jsx)(e.p,{children:`Even though the initial value gets disregarded on subsequent renders, the function that creates the initial value still runs. This can be problematic if we have initial values that are expensive to calculate because they can cause a significant delay when rendering our components.`}),` `,(0,t.jsxs)(e.p,{children:[`To calculate the initial value on only the first render and not on subsequent renders, we can pass a function to the `,(0,t.jsx)(e.code,{children:"useState"})," hook."]}),` `,(0,t.jsx)(i,{files:{"/App.js":`import { useState } from 'react' function expensiveComputation() { console.log("expensive computation ran") return 0 } export default function Counter() { const [count, setCount] = useState(() => expensiveComputation()) return ( <>

The count is {count}

) }`}}),` `,(0,t.jsx)(e.p,{children:`If you check the logs in the example above, you'll see that even though the component re-renders, the initialization function does not get called.`}),` `,(0,t.jsx)(e.p,{children:`Note that you should probably only use this if you're noticing significant render delays in your components, otherwise it's best practice to pass the value without lazy initialization.`})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(l,n)})):l(n)}var k=x;function h(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(S);})(); ;return Component;