State Management 101 - A Beginner's Guide to React State

State management is a crucial concept in React. State allows components to dynamically update UI based on data changes.

However, managing state properly takes some practice. Let’s walk through the basics of handling state in React:

Creating State

The useState hook defines state variables:

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
}

useState accepts the initial state value and returns:

• The current state
• A function to update it

Reading State

To display state in UI, simply reference the variable:

<p>You clicked {count} times</p>

React will re-render components on state change to reflect new values.

Updating State

Call the setter function to update state:

const increment = () => {
  setCount(prevCount => prevCount + 1);
}

<button onClick={increment}>Increment</button>

Always use the setter - don’t modify state directly.

State Batching

State updates are batched for better performance:

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

const increment3Times = () => {
  setCount(c => c + 1);
  setCount(c => c + 1); 
  setCount(c => c + 1);
}

This will only increment once instead of 3 times.

State Dependency

State values are guaranteed to be up-to-date if they are declared within the same component:

const [count, setCount] = useState(0); // count is always fresh

const increment = () => {
  setCount(c => c + 1);
  
  console.log(count); // 0 (not updated yet)
}

Summary

• useState hook declares state variables
• Reference state variables to display state
• Call setters to update state
• Updates are batched for performance
• State within a component is always fresh

Correctly managing local component state is a key React skill. State allows powerful, dynamic applications.