useState — How Interactivity Works in React

What is State?

In Figma, a component can have variants — a button can be in its "Default" state or its "Hover" state or its "Pressed" state. You switch between them manually in the prototype view.

In React, state is the same idea — but it changes automatically in response to what the user does. You don't switch variants manually. The component switches itself.

useState is the tool that makes this happen.

The Basic Pattern

'use client';

import { useState } from 'react';

export default function AddToCart() {
  const [added, setAdded] = useState(false);

  return (
    <button
      onClick={() => setAdded(true)}
      className={`px-6 py-3 rounded-full font-semibold text-white ${
        added ? 'bg-emerald-500' : 'bg-indigo-600'
      }`}
    >
      {added ? 'Added!' : 'Add to cart'}
    </button>
  );
}

Click the button once: it turns green and says "Added!". That's state in action.

Breaking Down useState

const [added, setAdded] = useState(false);

This one line does three things:

• Creates a piece of state called added, initially set to false
• Creates a function called setAdded to update it
• When setAdded is called, React re-renders the component with the new value

Think of it like a Figma variable with a setter. added is the current value. setAdded(true) is how you change it.

The onClick Handler

onClick={() => setAdded(true)}

This is an event listener. When the button is clicked, it calls setAdded(true), which changes added from false to true, which triggers a re-render with the new state.

In plain terms: user clicks → state changes → component updates. This is the entire basis of interactivity in React.

Conditional Rendering with State

{added ? 'Added!' : 'Add to cart'}

This is a ternary expression. Read it as: "if added is true, show 'Added!', otherwise show 'Add to cart'."

The same pattern works for classes:

className={added ? 'bg-emerald-500' : 'bg-indigo-600'}

"If added is true, use the green background. Otherwise, use the indigo one."

Common State Patterns

Boolean (toggle on/off)

const [isOpen, setIsOpen] = useState(false);
onClick={() => setIsOpen(!isOpen)}

Number (counter)

const [count, setCount] = useState(0);
onClick={() => setCount(count + 1)}

String (text input)

const [name, setName] = useState('');
onChange={(e) => setName(e.target.value)}

Why This Matters for Designers

Understanding useState means you can:

• Read AI-generated interactive components and understand how they work
• Ask AI to add specific interactive behaviours ("make this toggle between two states")
• Catch bugs when AI produces a component that doesn't behave as intended
• Build prototypes with real interactivity, not just linked static screens

State is the thing that makes a prototype feel like a real product. Once you understand it, the gap between your design intent and a working implementation gets much smaller.