Recap :

Yesterday, I created a Steps component that triggers an alert for 'previous' when the previous <button> is clicked and 'next' when the next <button> is clicked. Now, let's advance the Steps component to be interactive and update steps as we click on either the previous or next <button>. For this, we'll introduce a new concept in React called State."

State:

State is the most important concept in React, and everything basically revolves around state in React. We need to understand when to use state, where to place state, and the different types of state. Previously, we learned how to pass data into a component by using props, which is data coming from outside the component. But what if a component needs to hold its own data and keep it over time? Also, what if we want to make our page interactive, changing the UI as a result of an action?.

What is State and why do we need it?

State is essentially the data that a component can retain over time, crucial for information it needs to remember throughout the app's lifecycle. Therefore, we can think of state as a component's memory 🧠, as it holds information that can be modified during the component's lifecycle. Examples of state can be a notification count, text content of an input field, or the active tab in a tab component. State can also be a bit more complex, such as the content of a shopping cart. What all these pieces of state have in common is that the user can easily change these values.

When the state of a component changes, React automatically re-renders the component to reflect the updated state. This reactivity is a core feature of React, enabling a dynamic and responsive user interface. For instance, reading a notification drops the count down by one, or clicking on another tab changes the active tab. Each of these components needs to be able to retain this data over time, spanning the lifecycle of the application. For this reason, each piece of information is a form of state.

A piece of state, or a state variable, is simply a single variable in our component (component state). Updating the component state triggers React to re-render the component view. State is how React keeps the data in sync with the UI; we change the state, we change the UI.

In summary

State allows developers to update the component's view by re-rendering it
Also allows developers to persist local variables between renders.

State in practice:

In order to use state in practice within a component, we follow three steps:

First, we add a new state variable.

We achieve this by utilizing the useState function that React provides. The useState function takes an argument, which is the default value of the state variable, and returns an array. Let me explain this in more detail.👇

At line 7, the useState function takes in a default value of 1. When we console.log arr, it returns two values.👇👇

The first value displayed in the console is the default value of the state variable, and the second value is a function that we can use to update our state variable. So, let's destructure the array at line 7 and proceed with the next step.👇

At line 7 👆👆, 'step' represents the name of our state variable, and 'setStep' , just as the name implies, is a function we can use to update the 'step' (state variable).

The second step is to use the state variable in our JSX, like so 👇👇

See results👇👇

The third step is to update the state in an event handler. Now, it's time to use the setStep function to update the step state variable, like so👇👇

However, I encountered a bug because clicking the previous button continuously decrements the step, even to a negative value. Likewise, the next button keeps incrementing the steps👇

To fix this, I'll add a condition, and now it works fine. 👇👇

Now just a few more things to note:

State should be treated as immutable in React. Instead of modifying the state directly, you should use setState ( setStep ) and provide the new state.
"For best practice, when using a function to update the state variable, we use a callback function that takes the currentState variable as an argument. Using the updater function ensures that you are working with the latest state. In this case, it looks like this at line 13 and 16 👇👇👇

Also, note that the useState function is a hook in React, and most times we identify hooks because they start with 'use'. For example, useEffect, useReducer. We will learn in detail about React hooks a bit later, but for now, you need to know that we can only call hooks at the top level of the function component (App component in our example), and not inside another function, an if statement, or a loop.

Now, there are a few changes to dynamically display a message for each step. I added an array of messages at line 7 and used it at line 27👇