Reactbeginner8 min read

State

Understand React state, the internal memory of a component that allows it to respond to user interactions and update the UI in real-time.

Learning Goals

Explain what state is and how it differs from static props.

Identify user events that require dynamic state updates.

Understand how state updates trigger component re-rendering.

Structure state logically to avoid duplicate or sync issues.

The Core Concept

Props are fine for passing configuration down, but what if a user clicks a button, types in a form, or toggles a dark mode? A component needs a way to 'remember' things that change over time. This is called State.

State is a component's private local memory. When state changes, React automatically re-runs the component function and compares the new output to the old one, updating the browser window in real-time. This process is called Re-rendering. In this introduction to state, we will explore the core concept of dynamic variables and how React listens for changes.

Visual guide

React concept flow

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

1Concept

2Example

3Output

4Mistakes

5Practice

Code & Implementation

react

// A conceptual representation of state in a component.
// Note: We use the useState Hook to declare state in real React.
export default function LightSwitch() {
  // A variable that represents state
  const isLightOn = true;

  return (
    <div style={{ background: isLightOn ? '#fff' : '#222', padding: '30px' }}>
      <p style={{ color: isLightOn ? '#000' : '#fff' }}>
        The light is {isLightOn ? 'ON' : 'OFF'}
      </p>
      <button>Toggle Switch</button>
    </div>
  );
}

Expected Output

UI preview:
- White box containing text 'The light is ON'
- Button 'Toggle Switch'

Interactive State Concept Map

Hands-on practice task

Required for Mastery

The Challenge

Identify a component in a web application you use daily (like a social media feed or shopping cart) and map out at least three variables that must be stored in state, and what user actions update them.

Helpful Hints

•Think of actions like liking a post, adding an item to a cart, or opening a dropdown menu.
•Write the state variables as comments in a React component.

Quick Knowledge Check

Why can't I just use a standard let variable and change it on click?

JavaScript variables can update in memory, but React has no way of knowing they changed. The useState hook notifies React that a state change occurred so it can trigger a re-render and update the browser.

Where should state live?

State should live in the lowest component that needs to read or write it. If multiple sibling components need the same state, lift it up to their closest common parent.

Continue Learning

Next steps after this lesson

Previous lessonProps Next lessonEvents in React Interactive State Concept MapIdentify a component in a web application you use daily (like a social media feed or shopping cart) and map out at least three variables that must be stored in state, and what user actions update them.Json FormatterUse this free tool while practicing the lesson.Free Developer Learning HubExplore coding tutorials, tools, projects, automation guides, and resume resources.

Practice task

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