DEV Community

Marlon Munoz
Marlon Munoz

Posted on

{useState} HooK { Briefly Explained};

useState is a React Hook that allows you to add state to your components by returning an array with two variables: state, setState. The current state and the function that becomes the setter function when it is called. It can be used to track data or properties that need to be tracked in an application, such as strings, numbers, booleans, arrays, or objects.
Example:

const [state, setState] = useState();
Enter fullscreen mode Exit fullscreen mode

In simple terms, state will change at some any point and it needs to be updated, therefore 'setState' will update the state, triggering a re-render of your components over time.

In addition, useState can hold any kind of Javascript value, including objects. Something to ALWAYS keep in mind is that you should never change objects that you hold in React state directly. First, you need to create a new one or create a copy of an existing one and then setState to the new copy. For example:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};
Enter fullscreen mode Exit fullscreen mode

To use useState in a React component, first you need to import it form React by writing the following code in the top of the component's page in two different ways, both work perfectly so you can choose your poison.

import React from 'react'; 
import {useState} from 'react';
Enter fullscreen mode Exit fullscreen mode

or you can write in one line

import React, {useState} from 'react';
Enter fullscreen mode Exit fullscreen mode

React Hook useState can be called at the top level of a component or within custom hooks but not inside loops or conditions.

const [initialState, setInitialState] = useState();
Enter fullscreen mode Exit fullscreen mode

the initialState is only used during the initial render and will be disregard in subsequent renders.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay