Scribd
Upload
18 views5 pages

React Hooks

Uploaded by

pavan p
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 views5 pages

React Hooks

Uploaded by

pavan p
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/ 5

React_Hooks

State:State is an object in React that holds data or information about a


component. It determines the behavior and appearance of the
component.

Key Points :

1. State is mutable meaning it can change over time.


2. State is local to a component and cannot be accessed by other
components unless passed as props.
3. State enables React components to be interactive(Users can click
buttons, input text, or perform actions ) and dynamic.(UI updates
automatically when the state changes.)

Examples :

❖ Instagram Likes When you double-tap a post, it shows a heart ( ❤️) and
the number of likes increases by 1
State: Keeps track of how many likes a post has.

❖ E-commerce App : When you select a size for a shirt (e.g., Medium), the
app highlights it.
State: Tracks which size you selected.

❖ Movie Ticket Booking : You select a movie, a time, and seats.


State: Keep track of your selections and update the total price.

Introduction to Hooks

Hooks are Javascript functions that let you use React features (like state
and lifecycle methods) in functional components.
Functions starting with use are called Hooks.

Key Points :

❖ Simplified Code: No need for class components to manage state.


❖ Reusability: Share logic using custom hooks across components.
❖ Separation of Concerns: Better separation of UI and logic.
❖ Improved Performance: Reduces unnecessary re-renders.
❖ Easy Debugging: Hooks isolate logic, making debugging easier.
❖ Better Testing: Testing becomes straightforward as logic is isolated.

Rules for Writing React Hooks:

1. Call Hooks at the Top Level:Use hooks only at the top of your
functional component or custom hook & Do not call hooks inside loops,
conditions, or nested functions

2. Call Hooks in the Same Order:Always call hooks in the same order on
every render to avoid errors.

3. Use hooks only in functional components: Hooks should only be


used in functional components, and not in class components.

4. Don't use hooks conditionally or in loops: Hooks should not be


used conditionally(if ,else-if,switch-case) or inside loops (for, while, or
map,etc), as this can lead to inconsistent behavior in the component &
performance issues
useReducer

Hook used for managing complex state logic in functional components

It’s similar to useState but is better suited for situations where

★ State transitions depend on previous states.


★ You have multiple interdependent state variables.
★ There’s complex logic for updating the state (e.g., form handling,
counters, or global state).

Parameters :

reducer: A function that determines the next state based on the


current state and an action.
➔ A pure function that take
1. state (current state).
2. action (an object describing what to do).
3. Returns the new state.

initialState: The initial value of the state.

Example : You’re controlling a TV remote.

● State: The current channel.


● Action: Pressing a button (Next, Previous, or Reset).
● Reducer: Decides what the next channel should be based on
the action.
Flow
State: Current situation.
Action: Something happens (a command or request).
Reducer: Decides the next state.

REDUCER :

UseReducer
Real-World Analogy Example: Bank Account :
1. Deposits money.
2. Withdraws money.
3. Checks balance.

Payload : A payload is just a piece of data that you send along


with an action

Example :
If you want to add a new todo,remove a todo you need to tell
the reducer what to add or remove That "what" is your payload

You might also like