Scribd
Upload
10 views

35 - Usestate Hooks

The useState hook allows function components in React to have local state. useState returns an array with the current state value and a function to update it. To use useState, import it from React and call it, passing the initial state value. This returns an array that can be destructured to extract the current state and a setter function. Calling the setter function updates the state value reactively. State can hold any JavaScript primitive or object and multiple state values can be declared and managed independently.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

35 - Usestate Hooks

The useState hook allows function components in React to have local state. useState returns an array with the current state value and a function to update it. To use useState, import it from React and call it, passing the initial state value. This returns an array that can be destructured to extract the current state and a setter function. Calling the setter function updates the state value reactively. State can hold any JavaScript primitive or object and multiple state values can be declared and managed independently.

Uploaded by

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

PART-35

useState Hook
PRESENTER: MOHAMMAD ADIL
REACT
useState Hook REACT

• Hook state is the new way of declaring a state in React app.


• Hook uses useState() functional component for setting and retrieving
state.
useState Hook REACT

myArray useState(“Adil”)

myArray[0] Adil
myArray[1] Updated Value Function

Kumar Ali Zain


useState Hook
REACT
Destructuring

[name, setName] useState(“Adil”)

name Adil
setName Updated Value
Kumar Ali Zain
useState Hook
REACT
Destructuring

[name, setName] useState(“Adil”)


name Adil

setName Kumar

name Kumar
useState Hook REACT

• The React useState Hook allows us to track state in a function


component.
• State generally refers to data or properties that need to be tracking in
an application.
Import useState REACT

• To use the useState Hook, we first need to import it into our


component.
• At the top of your component, import the useState Hook.
• import { useState } from "react";
• Notice that we are destructuring useState from react as it is a named
export.
Initialize useState REACT

• We initialize our state by calling useState in our function component.


• useState accepts an initial state and returns two values:
• The current state.
• A function that updates the state.
Initialize state at the top of the function component.
Notice that again, we are destructuring the returned values from
useState.
Example: REACT

• Initialize state at the top of the function component.

import { useState } from "react";

function FavoriteColor() {
const [color, setColor] = useState("");
}
Update State REACT

• To update our state, we use our state updater function.


• We should never directly update state. Ex: color = "red" is not
allowed.
What Can State Hold REACT

• The useState Hook can be used to keep track of strings, numbers,


booleans, arrays, objects, and any combination of these!
• We could create multiple state Hooks to track individual values.
Multiple States REACT

• function Car() {
• const [brand, setBrand] = useState("Ford");
• const [model, setModel] = useState("Mustang");
• const [year, setYear] = useState("1964");
• const [color, setColor] = useState("red");
}

You might also like