How to use useState()

Michael Mathias — Mon, 03 Jul 2023 04:03:33 +0000

React's useState hook is an essential tool for managing state within functional components. This hook lets you add a state variable to your component to allow stateful behavior and update components in response to events or user interactions.

Usage of useState

To start using useState, import it from the 'react' package at the top level of your component.

import { useState } from 'react';

Next, declare a state variable with array destructuring. The naming convention for state variables is [something, setSomething].

const [age, setAge] = useState(24);

useState returns an array with two items:

The current state, initially set to the initial state you provided. 24 in the example above.
The set function that lets you change the current state to another value in response to a user interaction or other event.

Call the set function with some next state to change the current state.

setAge(21);

Updating State Based on Previous State

To update state based on the previous state, pass an updater function instead of the next state. The set function only affects what useState will return starting from the next render; it does not change the state in the already running code.

function handleAgeClick() {
  setAge(age + 1); // setAge(24 + 1)
  setAge(age + 1); // setAge(24 + 1)
  setAge(age + 1); // setAge(24 + 1)
}

Each setAge(age + 1) call becomes setAge(24 + 1). Fix this by using an updater function.

function handleAgeClick() {
  setAge(a => a + 1); // setAge(24 => 25)
  setAge(a => a + 1); // setAge(25 => 26)
  setAge(a => a + 1); // setAge(26 => 27)
}

The updater function takes the pending state and calculates the next state from it. I named the pending state argument 'a' which is the first letter of the state variable 'age'. This is a common naming convention you can follow.

Avoid Recreating the Initial State

function CustomerOrders() {
  const [orders, setOrders] = useState(createInitialOrders());
}

If you invoke a function as your initial state, the result will only be used for the initial render but the function will be called on every render. This can be wasteful but can be solved by passing the function as an initializer function to useState instead.

function CustomerOrders() {
  const [orders, setOrders] = useState(createInitialOrders);
}

React only calls your initializer function during initialization and not on every render.

Objects and Arrays in State

You should not mutate your existing objects since, in React, state is read-only.

form.lastName = 'Smith';

Rather than mutate your objects, replace the whole object and create a new one with the spread operator.

setForm({
  ...form,
  lastName: 'Smith'
});

Conclusion

By understanding and effectively utilizing useState, you can enhance the functionality and interactivity of your React components, making your applications more dynamic and responsive. To learn more about useState and everything React, please take a look at the React reference pages.

How to Fix JavaScript Errors

Michael Mathias — Mon, 15 May 2023 03:02:33 +0000

Have you ever wondered why your code isn't working? What does that dreadful red message mean? Don't worry that message is there to help you. Let's begin with some of the common errors you will encounter or may have already seen.

Error Types

The errors you face will generally be a syntax error or a logic error.

Syntax Errors
These errors are quite easy to fix because you will receive a message stating where the error occurred and what the error is.

The message starts off by providing the path to the error.

The path leads us to the 'index.js' file. The number '1' tells us that the error is on the first line of the 'index.js' file. Depending on which integrated development environment (IDE) you are using there may be a colon and a second number next to the first number indicating the character where the error starts.

Awesome! Now we know for sure that we have a syntax error. Unexpected identifier? What does that mean? Recall what we are doing on this line. We want to declare a variable with 'const'. Usually the problem is a misspelled word so let's check our spelling.

Looks like we misspelled 'const'. The 's' is missing! Let's fix it and see if that solves the problem.

Nice now our program is working and the error message is gone! Unexpected identifier is just one of the many syntax errors. If you would like to learn about all of the different types of syntax errors including range errors and type errors, I recommend visiting mdn web docs.

JavaScript error reference - JavaScript | MDN

Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the Error object, and has a name and a message.

developer.mozilla.org

Logic Errors
Now the errors that don't often involve a message. A syntax error stops the program part way through or prevents the program from running at all. Logic errors don't behave the same way. The program works but the results are not what we wanted or expected.

We want to make a program that returns a random number from 1 to 50. The problem is the program always returns 1. We didn't get a error message so we know there aren't any syntax errors. Let's backtrack and look at each part of the program.

Math.random() returns a random decimal number between 0 and 1.

Math.floor() rounds a number down.

The above code will always return 0 since Math.random() returns a decimal number between 0 and 1. So let's add 1 to always have it return a value of 1.

Before we round the random number down we first need to multiply it by 50.

Perfect, the program works! When you encounter a logic error you have to think about what you want your program to accomplish. If you aren't getting the expected results then dig into where you believe the error is and start dissecting your code.

Conclusion

As a beginner you will run into many errors but don't let that discourage you. Error messages are not something to fear but rather something to be comfortable with. They are there to help you achieve the results you are looking for.

DEV Community: Michael Mathias

How to use useState()

Usage of useState

Updating State Based on Previous State

Avoid Recreating the Initial State

Objects and Arrays in State

Conclusion

How to Fix JavaScript Errors

Error Types

JavaScript error reference - JavaScript | MDN

Conclusion