Mastering React State Management
Mastering React State Management
State management is crucial in React applications. Let's explore different approaches and when to use them.
1. Local State with useState
The foundation of React state management starts with useState:
SimpleCounter.js
import React, { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<div className="p-4 bg-white rounded shadow">
<p className="text-lg font-bold">Count: {count}</p>
<button
onClick={() => setCount(count + 1)}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
Increment
</button>
</div>
)
}
export default Counter