An Intro to React State

Hey new developers today I wanted to talk about a core functionality and one that is vital to react and that is state. This is one of the first things you will encounter when learning react and is essential when it comes to building more dynamic projects. Knowing how to use it properly is important and so today in this blog post we will explore the basics of what state is so we can use it effectively.

What is State?

State is a dynamic way to store information within a component that can change over time. Not to be confused with props, which is data passed down from a parent to a child, and will not change during the component's life. State allows a component to maintain and update data and when the state changes it triggers react to re-render, to reflect the new information and then that new info is stored in the place of the old data. State to me is like the "memory" of a component and can store multiple types of data such as strings, numbers, arrays, objects etc and because it can do all of this I'm sure you can see why it's useful.

Setting Up State

Now that we know what state is let me tell you how to set it up. All of the state for your application is held in React's internal code. Whenever you have a component that needs to work with state, you must first tell React to create some state for the component. For that you’ll use the useState hook, which is a function that allows you to hook into reacts internal state so we can add it. Here's a simple example:

import React, { useState } from 'react';

function Counter() {

  const [count, setCount] = useState(0);

  return (
    <div>
      //some code
    </div>
  );
}

export default Counter

In this example, first we import the useState hook from React(make sure to put the curly braces around useState). After that you create a variable inside brackets[] and make the contents = to useState with parenthesis after it so you can set the initial state. Next, you see a state variable called "count" and a function called setCount which is used to do exactly what it says, and that's set/update count(or whatever you would name it). We also initialized count to 0 by passing 0 as an argument to useState(0).

Why Use State and Managing complex state?

State is vital in React because it allows your application to be dynamic. Without state, your components and projects would not have all the modern functionality of applications today. The more advanced your apps and projects, you might find that you need to manage more complex state involving multiple variables. In these cases, you can use multiple useState calls.

Here’s an example of using multiple useState hooks:

import React, { useState } from 'react';

function UserProfile() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [email, setEmail] = useState('');

  return (
    <div>
      <input 
        type="text" 
        placeholder="Name" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
      <input 
        type="number" 
        placeholder="Age" 
        value={age} 
        onChange={(e) => setAge(Number(e.target.value))} 
      />
      <input 
        type="email" 
        placeholder="Email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <p>{`Name: ${name}, Age: ${age}, Email: ${email}`}</p>
    </div>
  );
}

export default UserProfile;

In this UserProfile component, we’re managing three pieces of state: name, age, and email. Each input field updates its corresponding state variable, and the component re-renders to show the updated user profile information.

Conclusion

I'm sure after this introduction to state you can see that state is a fundamental concept in React that you’ll use frequently as you build complex applications. By understanding how to use and manage state effectively, you’ll be well on your way to creating dynamic projects. So I recommend you get started asap working on it so that you will be an expert in no time!