BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

329What useState Does: Adding State to Function Components
330The useState Signature: [value, setter] Array
331Array Destructuring with useState
332Calling the Setter Function
333State is Local to Each Component Instance
334State Persists Between Renders
335Naming Convention: [thing, setThing]
336State Updates Trigger Re-renders
337Reading State in JSX
338Simple Counter Example
339Boolean State for Toggles
340String State for Text Input
341Importing useState from React
342How setState Triggers Re-renders
343State Updates Are Asynchronous
344Reading State After setState
345React Compares Old and New State
346Setting the Same Value Doesn't Re-render
347Multiple setState Calls in One Event
348The Re-render Lifecycle Flow
349State Updates Don't Merge
350Why You Can't Rely on State Mid-Render
351Debugging Re-renders with console.log
352The Mental Model: State as a Snapshot
353Setting Initial State with a Value
354Initial State Runs Only Once
355Complex Initial State Values
356When Initial State is Expensive to Compute
357Lazy Initial State with a Function
358Reading from localStorage at Initialization
359Initial State from Props
360When Props Change: Initial State Doesn't Update
361Each Component Instance Has Its Own State
362State Lives in the React Tree, Not the Component Function
363Unmounting Destroys State
364State is Owned by the Component That Declares It
365Position in the Tree Determines State Identity
366The Key Prop Resets State by Changing Identity
367Sibling Components Don't Share State

329What useState Does: Adding State to Function Components
330The useState Signature: [value, setter] Array
331Array Destructuring with useState
332Calling the Setter Function
333State is Local to Each Component Instance
334State Persists Between Renders
335Naming Convention: [thing, setThing]
336State Updates Trigger Re-renders
337Reading State in JSX
338Simple Counter Example
339Boolean State for Toggles
340String State for Text Input
341Importing useState from React
342How setState Triggers Re-renders
343State Updates Are Asynchronous
344Reading State After setState
345React Compares Old and New State
346Setting the Same Value Doesn't Re-render
347Multiple setState Calls in One Event
348The Re-render Lifecycle Flow
349State Updates Don't Merge
350Why You Can't Rely on State Mid-Render
351Debugging Re-renders with console.log
352The Mental Model: State as a Snapshot
353Setting Initial State with a Value
354Initial State Runs Only Once
355Complex Initial State Values
356When Initial State is Expensive to Compute
357Lazy Initial State with a Function
358Reading from localStorage at Initialization
359Initial State from Props
360When Props Change: Initial State Doesn't Update
361Each Component Instance Has Its Own State
362State Lives in the React Tree, Not the Component Function
363Unmounting Destroys State
364State is Owned by the Component That Declares It
365Position in the Tree Determines State Identity
366The Key Prop Resets State by Changing Identity
367Sibling Components Don't Share State

Lesson 356 of 2,396·10. useState BasicsPro lesson

When Initial State is Expensive to Compute

Avoid running expensive calculations on every render when setting initial state.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course