Scribd
Upload
18 views6 pages

Mastering Usestate in React

This document provides a beginner's guide to using the useState hook in React, which allows functional components to manage state. It covers the setup of useState, how to display and update state, and best practices for managing complex state with objects or arrays. Key points include the importance of using functional updates for accurate state changes and avoiding direct modifications to state.

Uploaded by

srisaketh111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views6 pages

Mastering Usestate in React

This document provides a beginner's guide to using the useState hook in React, which allows functional components to manage state. It covers the setup of useState, how to display and update state, and best practices for managing complex state with objects or arrays. Key points include the importance of using functional updates for accurate state changes and avoiding direct modifications to state.

Uploaded by

srisaketh111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

React js tips

Mastering useState
in React:
A Beginner’s Guide

Slim toumi
Slim toumi
React js tips

What is useState ?
useState is a React hook that lets functional components manage state, a
feature that was previously exclusive to class components.

Using useState
To start using useState, import it at the top of your component:

Setting Up useState
Calling useState with an initial value creates state in a component. This
returns an array with two elements

Explanation :
count : starts with an initial value of 0.
setCount : is used to update count and re-render the component.

Slim toumi
Slim toumi
React js tips

Displaying State in JSX


You can display the state directly in your JSX by referencing the state
variable:

Updating State
To change the state value, call the updater function, setCount. This
will schedule a re-render:

Note:
setCount does not immediately update the state. Instead, it schedules
an update, which is important if your updates depend on the previous
state.

Slim toumi
Slim toumi
React js tips

Functional State Updates


If the next state relies on the current state, use a functional update:

Note:
Using prev ensures that updates are accurate, especially when multiple
updates are triggered in rapid succession.

Managing Multiple States


To manage different pieces of state, call useState multiple times:

Note:
Each piece of state has its own variable and updater, keeping your code
modular and clear.

Slim toumi
Slim toumi
React js tips

Managing Complex State (Object Or Array)


When dealing with arrays or objects in state, avoid directly modifying
them. Instead, use the spread operator to create a new version, which
ensures React can track the update properly.

Example with an Object: Let’s say you have a state variable holding
an object with user details, and you want to update just one part of it.

Explanation :
...prevUser copies all properties from the previous user state.
name: 'John' updates the name while keeping the rest unchanged.

Note:
Why this is important: Directly modifying state can cause unexpected
behavior because React may not detect the change. Always return a
new object or array to let React know there’s an update.

Slim toumi
Slim toumi
React js tips

Hopefully You Found It


Usefull!
Be sure to save this post so you
can come back to it later

like Comment Share

Slim toumi
Slim toumi

You might also like