Introduction to React State: Making Your UI Interactive

Previously in this course, we explored Introduction to Component-Based Architecture in React and learned how to structure our UI. So far, all the components we've built have been "static"—they display information, but they don't change based on user interaction.

To build a truly interactive movie-browser, we need a way for our components to "remember" information that changes over time, like whether a movie is marked as a favorite or what the user has typed into a search box. That is exactly what state allows us to do.

What is State?

In React, state is a component's private data storage. It represents the "memory" of a component. When this memory changes, React automatically re-renders the component to reflect those changes in the UI.

Think of it this way: if your component were a person, props would be the information they were born with (like their name, provided by their parents), while state is what they learn or decide throughout their life (like their current mood or what they had for breakfast).

Props vs. State: The Core Difference

The distinction between props and state is the most important concept in React:

• Props (Properties): These are passed into a component from a parent. They are read-only. A component cannot change its own props; it simply receives them and renders accordingly.
• State: This is managed inside the component. It is mutable, meaning the component can change its own state over time in response to user actions or events.

Why We Need useState

In standard JavaScript, you might think you can just update a variable to change the UI:

JAVASCRIPT
let likes = 0;

function increment() {
  likes++; // The variable changes, but the screen won't!
}

This won't work in React. React doesn't know you changed the variable, so it won't re-render the component. This is where reactivity comes in. By using the useState hook, we tell React: "Keep track of this value, and whenever it changes, update the DOM for me."

useState is a function that returns an array containing two things:

1. The current state value.
2. A setter function used to update that value and trigger a re-render.

A Concrete Example: The "Like" Button

Let's add a "Like" button to our MovieCard component. We want the heart icon to toggle between filled and empty when clicked.

JSX
import { useState } from CE9178">'react';

function MovieCard({ title }) {
  // We initialize state with CE9178">'false' (not liked)
  const [isLiked, setIsLiked] = useState(false);

  return (
    <div className="movie-card">
      <h3>{title}</h3>
      <button onClick={() => setIsLiked(!isLiked)}>
        {isLiked ? CE9178">'❤️ Liked' : CE9178">'🤍 Like'}
      </button>
    </div>
  );
}

In this code, isLiked stores the current boolean state. When the button is clicked, we call setIsLiked(!isLiked). This tells React to flip the value and re-run the MovieCard function, effectively updating the button text instantly.

Hands-on Exercise

Open your movie-browser project and locate your MovieCard component.

1. Import useState from 'react'.
2. Add a piece of state called rating initialized to 0.
3. Add a button labeled "Rate" that, when clicked, updates the rating state to 5.
4. Display the current rating next to the title.

Hint: Remember that calling the setter function (e.g., setRating(5)) is the only way to trigger the UI update.

Common Pitfalls

Transitioning from imperative DOM manipulation to declarative state management often leads to a few classic mistakes:

• Direct Mutation: Never change state variables directly (e.g., isLiked = true). Always use the setter function provided by useState. If you mutate state directly, React will not detect the change, and your UI will stay stale.
• State Outside the Component: useState must be called at the top level of your component function. You cannot put it inside an if statement or a loop, as React relies on the order of hooks to manage state correctly.
• Misunderstanding Re-renders: A common point of confusion is why variables reset on re-render. For a deeper dive into how this works, check out React state management: Why variables reset and how to fix it.

Recap

State is the secret sauce that makes React apps feel alive. By using useState, we move from static HTML-like components to dynamic interfaces that respond to users. Remember: state is local and mutable, props are incoming and read-only, and if you need the UI to update, you must use the setter function.

As you continue building your movie browser, you'll find that mastering state management is the key to handling everything from complex forms to API data.

Up next: We will dive deeper into managing more complex state and learn about the best practices for using useState effectively in your components.