React "State" for Beginners

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 that determines a component's behavior and how it renders. Unlike a prop, state is dynamic and changes as the user interacts with the webpage and can be changed within a component. 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.

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:

import React, { useState } from "react";
import Header from "./navigation/Header";

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:

function App() {
    const [isDarkMode, setIsDarkMode] = useState(true);

    // Function to toggle dark mode
    const toggleDarkMode = () => setIsDarkMode(current => !current);

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.

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.

Example:

return (

{/* Additional components can be rendered here */}

);

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:

import React, { useState } from "react";
import Header from "./navigation/Header";

function App() {
const [isDarkMode, setIsDarkMode] = useState(true);

// Function to toggle dark mode
const toggleDarkMode = () => setIsDarkMode(current => !current);

return (
    <div className={isDarkMode ? "App" : "App light"}>
        <Header isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
        {/* Additional components can be rendered here */}
    </div>
);

}

export default App;

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. 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