React 19 Tutorials - 17 - Introduction to State

We've come a long way together. We can

create components, pass data with props conditionally render content, render lists, handle events, even have child components talk to their parents. But

even with all these skills, there is one simple thing we still cannot do. We

can't update what's on the screen. When

someone clicks a button, we can run functions and log to the console, sure but the actual UI never changes. It

shows the same thing it showed when the page first loaded. Let me show you what I mean. I've set up a new React project

I mean. I've set up a new React project called state hyphen demo and open it in VS Code, but you can continue using the same project you've been working with.

I've simplified the app component to just return a heading with the text code evolution react course. Now, let's

create a simple counter component. When

someone clicks a button, we want to increase the count and show the new number. Nothing fancy, just counting

number. Nothing fancy, just counting clicks. In the source folder, create a

clicks. In the source folder, create a new file called counter.jsx.

Define and export a component called counter. So, export const counter is

counter. So, export const counter is equal to an arrow function. For the JSX return a button with the text count

colon zero. Of course, we should display

colon zero. Of course, we should display the current count in the button text and not zero all the time. So, let's define a variable called count and initialize

it to zero. Let count is equal to zero.

Bind this variable to the button text using curly braces. Curly braces count.

Now, let's define a handle click function that increments the count value and logs the new value to the console.

Const handle click is equal to an arrow function and within the function count is equal to count + one. We are

incrementing the value and we will lock to the console the value of count.

Assign this function to the onclick prop of the button element. So on click is equal to the function handle click. Our

basic component is ready. We do have an error from eslint but we will ignore that for now. Let's import this component into our app component and see

what happens. At the top import counter

what happens. At the top import counter from dot /c counter and invoke the counter component. Save the files with

counter component. Save the files with the dev server running in your terminal.

Head to the browser with the dev tools console open. Click the button. you will

console open. Click the button. you will

see the count increment in the console.

1 2 3 and so on. But if you look at the button text, it's still count colon 0.

It never updates. Let me add one more console log to show you what's happening. Console log counter component

happening. Console log counter component rendered.

Refresh the page and watch the console.

We see counter component rendered once when the page loads. Remember the

duplication is because of React's strict mode which we will cover later in the course. But it is clear our counter

course. But it is clear our counter component rendered. Now when we click

component rendered. Now when we click the button we see one but no new render message. Click again. Two. Still no new

message. Click again. Two. Still no new render. Here's the problem. React

render. Here's the problem. React

doesn't know it needs to update the screen. When we change a regular

screen. When we change a regular variable, React has no idea anything happened. It rendered once with count is

happened. It rendered once with count is equal to zero. Displayed that and as far as React is concerned, its job is done.

Changing local variables doesn't trigger React to rerender the component. And

here's something else that's not obvious from our example, but is important to understand. Even if React did rerender

understand. Even if React did rerender this component for some reason, our count value would reset back to zero.

Why? Because every time a component renders, it runs from top to bottom. And

that means let count is equal to zero would run again starting fresh. Local

variables don't persist between renders.

So we have two problems. Changing variables doesn't make React update the screen. No rerender. And second

screen. No rerender. And second

variables reset every time the component renders. There's no persistence.

renders. There's no persistence.

This is where state comes in. State is a component's memory. It is special data

component's memory. It is special data that one triggers a rerender when it changes, solving our screen update

problem, and two persists between renders, solving our reset problem.

Think about all the interactive features you use on websites. shopping carts that show how many items you've added, forms that display when you're typing, models

that open and close, or theme switchers that toggle between light and dark mode.

None of these would work with regular variables. They all need state. Now, you

variables. They all need state. Now, you

might be wondering, wait, we've been using props to pass data around. What's

the difference between props and state?

Well, props are like arguments passed to a function. They come from outside and

a function. They come from outside and you can't change them. State is like the component's personal memory. It belongs

to the component and the component can't change it. State is what makes React

change it. State is what makes React components truly interactive. Without

state, we are basically creating fancy HTML templates. With state, we can build

HTML templates. With state, we can build real applications.

Now, when do you need state? Ask

yourself, does this data need to change over time? Should the UI update when

over time? Should the UI update when this data changes? Does the component need to remember this between renders?

If you answered yes to any of these, you need state. Now, here's the best part.

need state. Now, here's the best part.

React makes adding state to components super easy with something called hooks.

Hooks are special functions that let you hook into React features. And the most important hook for managing state is

called use state. Next, we will fix our broken counter using the use state hook.