Understand the useState Hook in ReactJS: A Clear Guide

Understanding State in React

What is state in React?

State in React refers to a structure that holds data or information about the components of a React application. Unlike props, which are read-only and passed to a component by its parent, state is managed within the component and can change over time. State is what allows React components to be dynamic and responsive to user inputs, API responses, and other real-time factors.

How State Works

When a component’s state changes, React automatically re-renders the component to reflect the new state. This re-rendering is a key aspect of React’s declarative nature, allowing developers to describe how the UI should look for any given state rather than manually updating the UI when the state changes.

For example, consider a simple counter application. The counter’s value is stored in the component's state. When a user clicks a button to increment the counter, the state is updated, and React updates the UI to display the new count.

Advantages of Using State

1. Dynamic User Interfaces: State enables the creation of interactive components, like forms, dialogs, and counters, that respond to user actions.
2. Local Data Management: State provides a local and easily manageable repository for data in each component, making it easier to track changes.
3. Synchronisation with External Data: State can be used to reflect and manage external data (like data fetched from an API), ensuring UI consistency.
4. Performance Optimization: With state, React can optimise performance by re-rendering only components that need to update, instead of the entire DOM.

Now that we understand what state is, let’s take a look a how we can manage it in our React application with the useState hook 😃

What Is the useState Hook ?

The useState hook is perhaps the most important hook to understand because it enables the functional programming style in React. (Classes were a bit of a pain, IM(NS)HO !)

To get started, you'll need to import the useState hook from the react library. Here's an example of how to do this:

import React, { useState } from 'react';

Once you've imported the useState hook, you can use it to create a state variable within your component. The useState hook takes an initial state value as its argument and returns an array with two elements: the current state value and a function to update the state. Here's an example of how to use the useState hook:

const [state, setState] = useState(initialState);

Or, if you are using TypeScript (which I recommend you do!):

const [state, setState] = useState<StateType>(initialState)

Where StateType is the type that you expect your state variable to have, e.g. number or boolean or a more complex type or interface.

Here, state is the current state value, and setState is a function that allows us to update the state. The initialState is the initial value of the state variable.

If we use the (now canonical) counter example, here's how it might look:

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

In this example, we've created a state variable called count and set its initial value to 0. We've also created a function called setCount that we can use to update the value of count.

Now you can use the count variable within your component just like any other variable. For example, you might want to display the current value of count in your component's render method:

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={() => {
	     setCount(count + 1);
			}
		}>Increment</button>
  </div>
);

In this example, we're displaying the current value of count using a JSX expression. We're also rendering a button that, when clicked, calls the setCount function to update the value of count.

Overall, setting up useState in a component is a straightforward process that allows you to manage state within your ReactJS applications. By following the steps outlined above, you can start using the useState hook in your own components and take advantage of its powerful state management capabilities.

Using the Previous State in useState

When updating state, the new state value may depend on the previous state value. To ensure that we always have the latest state value, we can use the previous state value provided by the useState hook.

Here's an example:

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

const increment = () => {
  setCount(prevCount => prevCount + 1);
}

In the example above, the increment function updates the state value using the previous state value. This allows us to avoid race conditions. To do so, we pass in a function to setCount that takes the previous state value as an argument and returns the new state value.

Handling Events & Forms

We can use state variables to handle events in our React components, typically in form inputs. Here's an example:

const [name, setName] = useState("");

function handleChange(event) {
  setName(event.target.value);
}

return (
  <div>
    <input type="text" value={name} onChange={handleChange} />
    <p>Hello, {name}!</p>
  </div>
);

In the example above, we declare a state variable name with an initial value of an empty string. We also declare a function handleChange that updates the state value with the new value entered in the input field. We pass handleChange as the onChange event handler to the input field.

Updating state with useState is a simple and powerful way to manage state in React components, and I much prefer it to class components. By using the previous state value and handling events, we can create dynamic and interactive user interfaces.

Rules of Using useState

When using the useState hook in ReactJS, there are a few essential rules to keep in mind to ensure the proper functioning of your application.

1. Only Call Hooks at the Top Level

Hooks should be called directly inside functional components and not inside loops, conditions, or nested functions. This is because React relies on the order in which hooks are called to manage state updates. If you call a hook conditionally, it may be called in a different order during subsequent renders, causing unexpected behavior.

2. Do Not Modify State Directly

When updating state with useState, you should never modify the state directly. Instead, you should use the setter function returned by the hook to update the state. Modifying the state variable directly means the new state value won’t actually be stored.

3. Use Functional Updates for Complex State

When updating state that depends on the previous state, you should use functional updates with the setter function returned by useState. This ensures that you are working with the most up-to-date state and avoids race conditions that can occur when updating state asynchronously.

4. Use Multiple useState Hooks for Distinct State

When managing multiple distinct pieces of state in a component, you should use multiple useState hooks rather than a single hook with an object or array. This ensures that each piece of state is managed independently and avoids unnecessary re-renders when updating a single piece of state.

5. Mutate State Objects & Arrays

When, on the other hand, there is a complex state with interdependent elements (in a registration or address form, for example) it can make sense to store the state in an object. In this case, you need to make sure you create a new object every time the state changes. An easy way to do so is by using the spread operator (… ) So for example if we are changing the city in a state object that holds the address, we could write :

const [address, setAddress] = useState<AddressInterface>({
  street: '',
  city: '',
  zipCode: ''
});

const changeCity = (city: string) => {
   setAddress({...address, city: city});
} 

Here in the changeCity function, and more precisely within the call to setAddress, we create a new object where all the field of the previous state are unchanged except for city which is updated to the new value. We’ll go in to this in more detail below. The core thing to remember here is : for React to be able to track state changes, it need to detect that the state has changed, i.e. that it holds a new object or array.

However, changing the value of a member of an object or pushing a new item on to a, array doesn’t create a new object. So for example :

const a = {
  name: "kodaps",
  id: 41
}

const b = a;

a.id = 42 

console.log(a ===b) // true and b.id is 42 

This is why we use the spread operator, so that we recreate a new object or array.

By following these rules, you can ensure that your use of useState in ReactJS is efficient, predictable, and error-free.

Using Arrays and Objects in Detail

Managing Arrays

Let's say we have a list of items that we want to display on our page. We can use useState to store the list of items in an array and then render each item using a map function.

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState(['item 1', 'item 2', 'item 3']);

  return (
    <div>
      {items.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

We initialise the items state with an array of three items. We then use the map function to render each item as a paragraph element. (and we make sure to have a key on the child component.

We can also use useState to add items to the array. Let’s say we have a form that allows the user to input a new item and then add it to the array.

function App() {
  const [items, setItems] = useState(['item 1', 'item 2', 'item 3']);
  const [newItem, setNewItem] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
     // we make sure to mutate the array,
     // push would not have worked here
    setItems([...items, newItem]);
    setNewItem('');
  };

  return (
    <div>
      {items.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newItem}
          onChange={(event) => setNewItem(event.target.value)}
        />
        <button type="submit">Add Item</button>
      </form>
    </div>
  );
}

In this example, we initialise a newItem state with an empty string. We then add a form that allows the user to input a new item. When the form is submitted, we use the spread operator to add the new item to the items array.

Managing Objects

Another common pattern is using useState to manage objects. For example, let's say we have a form that allows the user to input their name and email address. We can use useState to store the form data in an object and then display the data on the page.

function App() {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={formData.name}
            onChange={(event) =>
              setFormData({ ...formData, name: event.target.value })
            }
          />
        </label>
        <label>
          Email:
          <input
            type="email"
            value={formData.email}
            onChange={(event) =>
              setFormData({ ...formData, email: event.target.value })
            }
          />
        </label>
        <button type="submit">Submit</button>
      </form>
      <p>Name: {formData.name}</p>
      <p>Email: {formData.email}</p>
    </div>
  );
}

Here, we initialize the formData state with an object that has two properties: name and email. We then use the spread operator to update the state when the user types into the input fields.

Performance Optimisation Considerations

When using the useState hook in ReactJS, there are a few performance optimizations and best practices that can improve your app’s efficiency.

One way is to use the useCallback hook. This hook memoizes a function so that it only needs to be created once, even if it is called multiple times. This can be particularly useful when passing functions as props to child components, as it can prevent unnecessary re-renders.

Another way to optimize performance is to use the useMemo hook. This hook memoizes the result of a function so that it only needs to be recalculated when its dependencies change. This can be useful for expensive calculations or when rendering large lists.

Finally, when using useState, it is also important to keep the state as local as possible. State should only be used in the components that need it, rather than being passed down through multiple levels of the component tree. This can help to prevent unnecessary re-renders and improve the overall performance of the application.

Troubleshooting Common Issues

As with any programming tool, the useState hook in ReactJS can sometimes cause issues. Here are some common issues that you may encounter and how to troubleshoot them:

Issue: Initialising useState wrongly

One of the most common mistakes that developers make when using useState is initialising it incorrectly. This can cause unexpected behaviour in your application. Make sure to pass the initial state value to useState as an argument, like this:

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

Issue: Updating useState directly

Another common mistake is updating useState directly. This can cause your application to become out of sync and lead to bugs. Instead, use the setCount function that useState returns to update the state, like this:

setCount(count + 1);

Issue: Managing multiple input fields in forms

If you are working with forms that have multiple input fields, you may encounter issues with managing the state of each field. One solution is to create a separate state variable for each field, like this:

const [name, setName] = useState("");
const [email, setEmail] = useState("");

Then, you can update each state variable separately as the user inputs data.

Issue: Understanding how useState works with objects and arrays

useState works by shallow comparing values when changing, which means if you're using objects or arrays, you need to alter the reference. If you don't, the app UI won't be refreshed. To avoid this, use the spread operator to create a new object or array, like this:

setUser({ ...user, name: "John" });

By troubleshooting these common issues, you can ensure that your useState hook is working correctly and avoid unexpected behavior in your application.

Best Practices for useState

When working with the useState hook in ReactJS, there are some best practices to keep in mind to ensure that your code is optimized and easy to maintain.

Use Descriptive Variable Names

One of the best practices when using useState is to use descriptive variable names. This will make it easier for you and other developers to understand what the state variable is used for. For example, if you are using useState to store the value of a checkbox, you could name the variable isChecked. This makes it clear what the variable is used for and can help prevent confusion later on.

Use Destructuring to Access State Variables

Another best practice when using useState is to use destructuring to access state variables. This makes it easier to read and understand your code. For example, instead of writing const count = useState(0)[0], you can write const [count, setCount] = useState(0). This makes it clear what the variable is used for and can help prevent confusion later on.

Use the Functional Update Form of setState

When updating state with useState, it's important to use the functional update form of setState. This ensures that you are always working with the latest state and can help prevent bugs. For example, instead of writing setCount(count + 1), you can write setCount(prevCount => prevCount + 1). This ensures that you are always working with the latest state and can help prevent bugs.

By following these best practices, you can ensure that your code is optimized, easy to maintain, and free of bugs.

Best Practices

• Minimize Statefulness: Only make components stateful if necessary. Excessive use of state can make components harder to maintain and understand.
• Lift State Up: When multiple components need to access or modify the same state, it’s often beneficial to lift the state up to their closest common ancestor.
• Immutable State Updates: Always use setState or the updater function from useState to change state. Direct modification of state is a common source of bugs.
• Keep State Localized: If a piece of data doesn’t influence the UI, consider keeping it out of the state. For instance, use local variables or class fields for values that don’t trigger re-renders.