React Functional Components: How to Set State (Instead of `setState`) – A Beginner's Guide

Table of Contents#

A Quick Recap: Class Components and setState
Introducing React Hooks: useState
Understanding the useState Hook: Key Concepts
Setting State with useState: Practical Examples
Common Pitfalls to Avoid
Best Practices for Using useState
Conclusion
References

1. A Quick Recap: Class Components and `setState`#

Before diving into functional components, let’s briefly recap how state was managed in class components. In class components, you initialized state in the constructor (or as a class property) and updated it using the setState method.

Example: Class Component with `setState`#

import React from 'react';
 
class Counter extends React.Component {
  // Initialize state
  state = {
    count: 0,
    isActive: false
  };
 
  // Update state with setState
  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };
 
  toggleActive = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive
    }));
  };
 
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
        <p>Active: {this.state.isActive ? 'Yes' : 'No'}</p>
        <button onClick={this.toggleActive}>Toggle Active</button>
      </div>
    );
  }
}
 
export default Counter;

Key Notes About `setState`:#

setState is asynchronous: React batches state updates for performance, so you can’t rely on this.state immediately after calling setState.
It merges state: When you pass an object to setState, React merges the new state with the existing state (e.g., updating count won’t overwrite isActive).
Functional form: For state updates that depend on the previous state (e.g., toggling a boolean), use the functional form setState(prevState => newState).

2. Introducing React Hooks: `useState`#

React Hooks (introduced in 2018) allow you to use state and other React features without writing a class. The most fundamental hook for state management is useState.

What is `useState`?#

useState is a function that lets you add state to functional components. It returns an array with two elements:

The current state value.
A function to update that state (often called a "setter" function).

3. Understanding the `useState` Hook: Key Concepts#

Basic Syntax#

To use useState, first import it from React, then call it inside your functional component:

import { useState } from 'react';
 
function MyComponent() {
  // Declare a state variable: [stateName, setStateName] = useState(initialValue)
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Breakdown:#

useState(0): Initializes the state variable count with the value 0.
count: The current value of the state (starts as 0).
setCount: The setter function to update count. Calling setCount(newValue) re-renders the component with the new count.

Key Differences from `setState`#

No merging: Unlike setState in class components, useState setters do not merge state. If your state is an object and you update one property, you must explicitly include the other properties (more on this later).
Multiple state variables: With useState, you can declare multiple independent state variables instead of grouping them into a single state object (e.g., const [name, setName] = useState(''); const [age, setAge] = useState(0);).

4. Setting State with `useState`: Practical Examples#

useState can handle any data type: primitives (strings, numbers, booleans), objects, arrays, etc. Let’s explore examples for common use cases.

Primitives (Strings, Numbers, Booleans)#

Primitives are the simplest state types. Updating them is straightforward.

Example: Toggle a Boolean#

function Toggle() {
  const [isToggled, setIsToggled] = useState(false);
 
  return (
    <div>
      <p>Toggled: {isToggled ? 'ON' : 'OFF'}</p>
      <button onClick={() => setIsToggled(!isToggled)}>Toggle</button>
    </div>
  );
}

Example: Update a String#

function NameInput() {
  const [name, setName] = useState('');
 
  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)} // Update state with input value
        placeholder="Enter your name"
      />
      <p>Hello, {name || 'Guest'}!</p>
    </div>
  );
}

Objects#

When state is an object, you must explicitly merge the previous state with new values, as useState does not auto-merge like setState in classes.

Example: User Profile (Object State)#

function UserProfile() {
  // Initialize state as an object
  const [user, setUser] = useState({
    name: 'John Doe',
    age: 30,
    email: '[email protected]'
  });
 
  // Update only the "name" property (without losing "age" or "email")
  const updateName = () => {
    setUser(prevUser => ({
      ...prevUser, // Spread previous state to keep other properties
      name: 'Jane Doe' // Override the "name" property
    }));
  };
 
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
      <button onClick={updateName}>Change Name to Jane</button>
    </div>
  );
}

Why spread? If you did setUser({ name: 'Jane Doe' }), the age and email properties would be lost! Using the spread operator (...prevUser) ensures all existing properties are preserved.

Arrays#

Arrays are also common in state (e.g., todo lists, lists of items). Always replace the array instead of mutating it (e.g., avoid push, pop, splice—use map, filter, or the spread operator to create a new array).

Example: Todo List (Array State)#

function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Build an app']);
  const [newTodo, setNewTodo] = useState('');
 
  // Add a new todo
  const addTodo = () => {
    if (newTodo.trim()) {
      // Create a new array with the existing todos + newTodo
      setTodos([...todos, newTodo]);
      setNewTodo(''); // Clear input
    }
  };
 
  // Remove a todo by index
  const removeTodo = (indexToRemove) => {
    // Create a new array excluding the todo at indexToRemove
    setTodos(todos.filter((_, index) => index !== indexToRemove));
  };
 
  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>×</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Key Array Update Patterns:

Add item: [...prevArray, newItem]
Remove item: prevArray.filter(...)
Update item: prevArray.map(...)
Replace item: prevArray.slice(0, index) concat(newItem, prevArray.slice(index + 1))

5. Common Pitfalls to Avoid#

Pitfall 1: Directly Mutating State#

React relies on state updates to trigger re-renders. If you mutate state directly (e.g., todos.push(newTodo)), React won’t detect the change, and your component won’t re-render.

❌ Bad (mutates state):

const addTodo = () => {
  todos.push(newTodo); // Mutates the existing array!
  setTodos(todos); // No re-render (same array reference)
};

✅ Good (replaces state):

const addTodo = () => {
  setTodos([...todos, newTodo]); // New array reference → re-render
};

Pitfall 2: Expecting State Updates to Be Synchronous#

Like setState, useState updates are asynchronous. You can’t rely on the new state value immediately after calling the setter.

❌ Bad (expects synchronous update):

const increment = () => {
  setCount(count + 1);
  console.log(count); // Logs the OLD count (not updated yet!)
};

✅ Good (use useEffect to react to state changes):

import { useState, useEffect } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    // Runs after count updates
    console.log('New count:', count);
  }, [count]); // Re-run only when count changes
 
  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

Pitfall 3: Updating State Based on Previous State (Without the Functional Form)#

If the new state depends on the previous state (e.g., incrementing a counter multiple times), use the functional update form to ensure you’re using the latest state.

❌ Bad (may use stale state):

const incrementTwice = () => {
  setCount(count + 1); // Uses the current count
  setCount(count + 1); // Still uses the SAME current count → only increments once!
};

✅ Good (functional update):

const incrementTwice = () => {
  // Use the functional form: prevCount => newCount
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1); // Now increments twice!
};

6. Best Practices for Using `useState`#

1. Keep State Local#

Only hoist state to a parent component if multiple components need to share it. Otherwise, keep state as close to where it’s used as possible.

2. Use Multiple State Variables#

Instead of one large state object, split state into smaller variables for clarity:

❌ Avoid (single large object):

const [user, setUser] = useState({ name: '', age: 0, email: '' });

✅ Better (multiple state variables):

const [name, setName] = useState('');
const [age, setAge] = useState(0);
const [email, setEmail] = useState('');

3. Name State Variables Clearly#

Use descriptive names for state variables and setters (e.g., [isLoggedIn, setIsLoggedIn] instead of [x, setX]).

4. Lazy Initialization for Expensive Values#

If initializing state is computationally expensive (e.g., parsing a large dataset), pass a function to useState to run the initialization only once:

// Expensive initialization (runs only once, on first render)
const [data, setData] = useState(() => {
  return expensiveComputation(); // Runs once, not on every render
});

7. Conclusion#

In React functional components, useState has replaced setState as the primary way to manage state. Key takeaways:

useState returns [state, setState] and works with any data type.
Always replace state (especially objects/arrays) instead of mutating it.
Use the functional update form (setState(prev => newState)) when the new state depends on the previous state.
Avoid common pitfalls like direct mutation and synchronous state update expectations.

With useState, you can write clean, readable state logic in functional components. Practice with different data types (primitives, objects, arrays) to build confidence!