Using State Management In Your Life

Introduction

Whether you're a new coder, or a complete newbie trying to save costs by building out your own website and it's functionality, State is a huge deal!

Understanding State

In React, "state" refers to the data that a component manages and can change over time. It represents the current condition or values within the component, affecting its behavior and rendering. State allows components to dynamically update and re-render based on user interactions, data changes, or other triggers without requiring a full page refresh. It's crucial for building interactive and dynamic user interfaces in React applications. In other words, it's basically the memory that holds the values of whatever data you want to manipulate.

How To Use State

State itself is a product of React, so for starters you need to have react imported within your file, and within that import statement you add the "useState" hook to signal react to pull that hook from it's libraries. Then once you have it imported, you have to define what variables you want to hold state. That whole section looks something like this:

import React { useState } from "React";

const [cars, setCars] = useState([]);

We see on line 1 our import statement, then below we set the value of state to the 'cars' variable, which also defines it, then we use a setter function 'setCars' which we will use to update state. For example if we want to add cars to the cars variable, we would call the setCars function once we have the new data, to then update state.

Real World Example Of State In Action

For my Phase 2 project, I opted to make a car buying / selling site, and the main goal I had to accomplish first was showing all the cars for sale on the home page. I first had to set cars to state, fetch the list of cars from my server, then set those cars to the 'cars' variable. so now that empty state variable holds the value of the cars array of objects:

const Home = () => {
  const [cars, setCars] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/cars')
      .then((response) => response.json())
      .then((data) => setCars(data));
  }, []);

Using the useEffect hook (another function from the React library) I fetched the cars from the server and set that data to the cars variable using my setter function setCars. From here I could change the setCars to a console log statement to initially check I fetched the data properly, but since we already did that, I now can use the 'cars' variable in my return statement. for example, if I were to create a h1 I could input {cars.name} between the header, and now on my page, the first car on the lists name would show.

But I want to show all my cars so how can I do that? MAP! Since I want to show each cars name, I can map through the cars array and then for each car, I can make a h1 that shows {car.name}. Now every car on that list will have it's name rendered on the page. Seems pretty easy right?

How To Manipulate The Cars State

Just showing all the cars is nice, but I want people to be able to actually buy and sell cars, so heres how we do that:
This will require additional components (react files that take in props and return JSX). We need a purchase page, and a selling page, in which we have to obtain the state cars variable from our Home file. Once we do that, then we can input form handling to make it so on a submit of payment info or the details of the car they are selling, we then use a GET & POST request to that server to either add a new car to the list or remove one when it's purchased.

How This Benefits You -> "In Conclusion"

Understanding state management in React or any web development framework is akin to mastering the control panel of a complex system. It empowers new coders and website creators by offering a way to handle and control data dynamically. Imagine building a website where you want certain parts to change based on user actions, like updating a shopping cart's item count or toggling between light and dark mode seamlessly. State management provides the mechanism to make these changes without reloading the entire page, enhancing user experience and interaction. It enables smoother, more responsive websites by allowing components to communicate, update, and reflect changes instantaneously. Embracing state management not only enhances the functionality of websites but also lays a foundational skill crucial for crafting modern, interactive web applications