Lesson 3: Component State & The useState Hook

While props allow parents to pass data in, state holds private, local component data that can change over time in response to user actions.

Triggering Re-renders: Calling the state setter function (setCount) instructs React to schedule a re-render with the updated value.

Never Mutate State Directly: Always use the setter function rather than modifying variables like count = 5.

Functional State Updates: When new state depends on previous state, pass an updater callback setCount(prev => prev + 1).

⊞Code Example

import React, { useState } from 'react';

export default function InteractiveCounter() {

const [count, setCount] = useState(0);

const [theme, setTheme] = useState("dark");

return (

<h3 style={{ color: '#04AA6D' }}>Current Count: {count}</h3>

<button onClick={() => setCount(prev => prev + 1)}>Increment (+)</button>

<button onClick={() => setCount(prev => prev - 1)}>Decrement (-)</button>

<button onClick={() => setCount(0)}>Reset</button>

</div>

);

}