React has become a powerful tool amongst developers, it's used by large companies like Facebook, Tesla, Airbnb and many more. React has revolutionized the way developers create dynamic web applications. One of the core concepts that makes React so powerful is state.

But what is state?

State refers to the data in a component, such as strings, arrays, objects, or even functions, that determines how the component behaves and renders. It can store anything you want to keep track of in your application, such as user inputs, API responses, or toggled settings. Unlike a prop, state is dynamic and changes as the user interacts with the webpage and can be changed within a component. A prop is read-only and is information passed down from a parent to a child and can be any data type(strings, numbers, objects, functions). Some examples of what makes state change is user inputs, responses from APIs, and toggling.

State is mutable, it lets us maintain and update information within a component independently, without needing the parent component to send updated data. With state, you can control what is displayed on the screen based on changes in data or user activity, making your web applications feel more responsive and engaging.

State seems incredibly useful, but how can we implement it?

Using State

There are several ways State can be stored and managed. Starting with the hook useState, useState is a special function that gives a component the ability to track dynamic data and automatically re-renders the component whenever the state changes.

Example:

Explanation: In the example above, useState must first be imported from React to manage the components state. This is essential for functional components.

Initializing and Setting State

After state has been imported, we must declare, initialize and set. In React, initializing is defining and setting the values for a components state when it is created, this determines how the component renders and behaves.

Example:

Explanation: Our example utilizes array de-structuring, we have a state variable called isDarkMode with the value of true, which means that when the App component first renders, the isDarkMode variable will be initialized to true. isDarkMode being initialized to true means the application will start in dark mode. isDarkMode is the current state value and setIsDarkMode is used to update the isDarkMode state.

To set our state, we must use the keyword set. In our example it is referred to as "setIsDarkMode". Our toggleDarkMode function is changing the value of isDarkMode between true and false each time it is called. Our setIsDarkMode(current => !current) updates the state by calling the setIsDarkMode function, current is the current state value of isDarkMode when setIsDarkMode is called, !current takes the value of current which is a boolean(true or false) and negates it. If current is true, !current evaluates too false, but if current is false, !current evaluates too true.

To summarize, the state variable isDarkMode with a value of true using the useState hook, the setIsDarkMode function is used to update this state. The toggleDarkMode function outlines the logic for toggling the value of isDarkMode, ensuring that the component will re-render with the new value whenever it is called.

There are two approaches when setting state in React. You can pass a new value directly to the setter function, which will replace the current state value or by using a functional form.

When you need to update the state based on its current value, it's better to use the functional form of the setter function. In this form, you pass a function to the setter that takes the current state value as an argument and returns the new state value. For example, setIsDarkMode(current => !current) ensures that the state update uses the most recent value of isDarkMode.

The functional form is built into React's useState hook and helps manage state accurately by ensuring that the internal workings of React always use the most recent state value.

One important thing to note about state and setting state is that setting state is asynchronous, when you call the state update function (like setIsDarkMode), the new state value might not be immediately available for use right after the call.

Now that we imported, initialized and set our state we can render our component.

Rendering the component

Rendering a component is react calling your component to display something on your application. When the state changes, React re-renders the component to reflect the updated state.

Example:

Explanation: First we assign the class, the className of the div element is set based on the value of isDarkMode. If isDarkMode is true, the class will be "App"; if false, it will be "App light". This can be useful for changing the appearance of the application.

isDarkMode={isDarkMode} allows the Header component to access the current state of dark mode, enabling it to render content conditionally based on whether dark mode is active. toggleDarkMode={toggleDarkMode} allows the Header to invoke the toggleDarkMode function, providing a way to change the dark mode state from within the Header component.

Completed code:

Conclusion: Why is state important?

State is crucial to building dynamic webpages in React, it allows components to create, manage and respond to changing data that the user interacts with on a page, it allows you to control what is displayed on the screen based on changes in data or user activity. Mastering state can be complicated, but if you follow the steps above you can create dynamic user interfaces.

If you would like to explore state more in depth, checkout react.dev(https://react.dev/learn/managing-state).

Sources:

Cover Photo: https://www.linkedin.com/pulse/introducing-react-19-revolutionizing-development-muhammad-zain-o7mwf/

Content: https://learning.flatironschool.com/courses/8107/pages/react-state?module_item_id=716825