Reactbeginner6 min read

Hook: useState

TechIdea Experts

Author & Reviewer

Last updated:Jul 9, 2026

Master the useState Hook, the official React function that lets you add state variables to your functional components.

Learning Goals

Initialize state values using the useState hook correctly.

Update state safely using setter functions without mutating state directly.

Handle complex state updates based on previous state values.

Bind form inputs to state variables using controlled elements.

Video Tutorial Coming Soon

Our expert team is currently recording the visual guide for Hook: useState.

The Core Concept

The useState hook is a built-in React function that lets you add local state to a functional component. It is the most common hook in React development.

When you call useState(initialValue), it returns an array containing exactly two items: first, the current state value, and second, a function to update that state value. We use JavaScript array destructuring to assign names to both items in a single line (typically using the pattern [value, setValue]). It is critical to always use the setter function to update the state, rather than mutating the variable directly.

Visual guide

React hooks data flow

A simple original diagram to connect the lesson idea with real project flow.

1Component

2Hook logic

3State update

4Effect or event

5UI render

Code & Implementation

react

import { useState } from 'react';

export default function Counter() {
  // Declare count state variable, starting at 0
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Interactive Counter</h2>
      <p>Current count: {count}</p>
      
      {/* Update state using the setter function */}
      <button onClick={() => setCount(count + 1)} style={{ marginRight: '8px' }}>
        Increment
      </button>
      
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

Expected Output

UI preview:
- Heading 'Interactive Counter'
- Text 'Current count: 0'
- Buttons 'Increment' and 'Reset'

Dark Mode Toggle

Hands-on practice task

Required for Mastery

The Challenge

Build a React component that manages a boolean dark mode state. When the user clicks a button, toggle the state and change the background and text color of the component.

Helpful Hints

•Initialize const [darkMode, setDarkMode] = useState(false);.
•Toggle it with setDarkMode(!darkMode) inside the onClick handler.
•Set styles dynamically based on the darkMode boolean.

Quick Knowledge Check

Why does React use hooks instead of regular functions?

Hooks allow functional components to hook into React state and lifecycle features without writing complex class components.

What happens if I call count = count + 1 directly?

React will not detect the change, and the UI will not update. Always use the setter function (setCount) to trigger a re-render.

Continue Learning

Next steps after this lesson

Previous lessonList Rendering Next lessonHook: useEffect Dark Mode ToggleBuild a React component that manages a boolean dark mode state. When the user clicks a button, toggle the state and change the background and text color of the component.Slug GeneratorUse this free tool while practicing the lesson.Free Developer Learning HubExplore coding tutorials, tools, projects, automation guides, and resume resources.

Practice task

Build a React component that manages a boolean dark mode state. When the user clicks a button, toggle the state and change the background and text color of the component.

Ready to take action?

Supercharge your career workflows!

Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.

Browse 80+ Free Tools Build Professional Resume

Learning Resources

View All Courses

Practice Quizzes

Test HTML, CSS, and JavaScript basics with instant feedback.

🎓 Why Trust This Course?

This curriculum was designed by senior software engineers to simulate real-world production environments. We focus on practical, project-based learning instead of abstract theory.

✓ Content Review Date: 7/9/2026
✓ Official Contact: contact.techideaonline@gmail.com
✓ Editorial Policy: Strict peer-review by industry professionals.

Editorial Integrity

Fact Checked

Written By

TechIdea Learning Team

Senior Developer and Technical Instructor building enterprise-grade learning resources. View full profile.

Reviewed By

TechIdea Editorial Board

Technical accuracy verified by our expert engineering panel.

Why Trust TechIdea?

This guide was created to help developers globally learn practical skills. We focus on real-world examples, objective analysis, and safe coding practices. Our content is regularly updated and subjected to strict human oversight. Read our Editorial Policy.