Hook Using useState

Session No.: 9
Course Name: Full Stack Development Using React and Node.JS
Course Code: E1UA207B
Instructor Name: Pallavi Sharma

Galgotias University 1
Recap… .

• What is a Hook, and why is it useful?

• What is the purpose of the useState hook?
• What is the purpose of the useEffect hook?

Galgotias University 2
 Hook is a special tool in React that lets you add features like
memory (state) and actions (side effects) to your components..

⏰Uses- Remember things (like a counter value) → useState

Do something when something changes (like fetch data or update
the page title)

Reflection on UseState Hook The useState hook lets your React component
the responses remember things.
For example, if you want to keep track of a number, a name, or a
button click, useState helps you store that info and update it
when it changes.
Every time the value changes, your component re-renders to
show the new value.
Example:
If you're building a counter, useState helps you remember the
current count and update it when someone clicks the button.

Galgotias University 3
"Imagine an e-commerce
application where users can
add or remove items from a
shopping cart. The cart's
state must be managed
efficiently so that the UI
updates instantly whenever
an item is added or removed.

Galgotias University 4
Ask Questions

How State Management Helps Here ? How you render only the
necessary part ?

Galgotias University 5
At the end of this session students will be able to

Understand state
management

1.Will understand the concept and

types of hook

Galgotias University 6
 1 introduction to Sate Management

2 Importance of State Management

3 Overview of React Hooks for state management

4 useState vs useEffect

Session
Outline

Galgotias University 7
Consider a scenario being shown in the image below

Here in the image:

• Building = React Component

• Price Tag = State (data being
tracked)
• Clipboard = State Management
(system keeping it updated and
consistent)

Galgotias University 8
Learning Activity 1-
Think-Pair-Share
Consider the below scenarios

Traffic Light :

• What can be considered as component in this analogy?

• What represent a state change in traffic light?
• What might be the "state management system" in this analogy?

Library Analogy:
• Which component represent the state in a library?
• What roles do the bookshelf and catalog/librarian play?
• What happens when a book is updated or moved?

Galgotias University 9
Reflection-
Learning Activity 1-
Traffic Light = UI Component

Current Light color(Red,Yelloe,Green)=State

Control System(that updates the light based on

timing/Sensors) – state management
.
When state (light color) changes, the component
(traffic light) updates accordingly. The
management system ensures the state transitions
correctly over time.

Galgotias University 10
Reflection- Bookshelf = Component (holds UI elements)

Learning Activity 1- Books = State (data or content inside the component)

Librarian System / Catalog = State Management (decides

which book is where and updates when needed)

So, when a book (state) is added, removed, or moved, the

shelf (component) reflects that change immediately through
proper cataloging (state management system).

Galgotias University 11
React Hooks are a powerful feature in React that allows
you to manage state and side effects in functional components.

The hook represents the special functions

(useState, useE ffect, etc.) that "hook into" React’ s features.

The idea is that hooks let function components manage state,

side effects, and lifecycle features— something previously exclusive
to class components.

Galgotias University 12
Alarm Clock = triggers an effect after a set time or
condition.
Hook = Mechanism to “ attach” that behavior to
the component.
React Logo = Represents the React component
where this behavior is used.

Galgotias University 13
Types of Hooks

- useState
- useEffect
- Custom Hook

Galgotias University 14
Imagine your React component is a smart bedroom. Inside it, you have two essential tools:

- useState = The whiteboard in your hall

You keep a whiteboard in your room where you write down important information: your wake-up
time, to-do list, or current temperature.
• You update it whenever something changes.
• You look at it to know the current situation.
• If you update it, the whole room (component) might reorganize based on the new info (re-render).

- So useState is like storing and updating your own internal memory

Galgotias University 15
Imagine your React component is a smart bedroom. Inside it, you have two essential tools:

useEffect = The Smart Alarm System

Now, your room also has a smart alarm system that reacts when something changes on the
whiteboard.

● If you change your wake-up time, the system might set an alarm.

● If you leave the window open, it might trigger a reminder after 5 minutes.

● And when you leave the room, the system will clean up— like cancelling the alarm or turning off
the heater.

✅ So, useEffect is like setting up side effects based on changes— actions that should happen
outside the component (like timers, API calls, event listeners, etc.).

Galgotias University 16
useE ffect = The Smart Alarm System
useE ffect = The Smart Alarm System
useE ffect = The Smart Alarm System

Together:

useState = storing and changing information inside your room.

useEffect = reacting when something changes, and possibly doing cleanup
when leaving or changing again

Galgotias University 17
useE ffect = The Smart Alarm System
useE ffect = The Smart Alarm System
useE ffect = The Smart Alarm System

Galgotias University 18
Discussion on the post session activities

Design a simple counter app using React. The UI should display the current count and
have three buttons: Increment, Decrement, and Reset.

a. What React hook would you use to manage the count state? Explain why.
b. Describe the basic UI layout you would create (text, buttons, labels, etc.).
c. Write a brief outline or pseudocode of how the counter logic would work using state.
d. How would you ensure that the count never goes below 0?

Galgotias University 19
Information to next topic of the
course
Hook using useState

Galgotias University 20
 Thank you

Galgotias University 21