Scribd
Upload
3 views

React useReducer Hook

The document provides an overview of the useReducer hook in React, which is utilized for managing complex state logic by allowing state updates based on specific actions. It explains when to use useReducer, the components of a reducer function, and the process of dispatching actions to update the state. Additionally, it includes examples and emphasizes the importance of organized and predictable state management.

Uploaded by

MAURYA ABHINAND
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
3 views

React useReducer Hook

The document provides an overview of the useReducer hook in React, which is utilized for managing complex state logic by allowing state updates based on specific actions. It explains when to use useReducer, the components of a reducer function, and the process of dispatching actions to update the state. Additionally, it includes examples and emphasizes the importance of organized and predictable state management.

Uploaded by

MAURYA ABHINAND
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

REACT
useReducer
HOOK
Page 1
React js tips

What is useReducer ?
useReducer is a React hook used to manage more complex state
logic. It provides a way to update the state based on specific actions,
allowing you to handle scenarios where the state changes in multiple
ways or relies on previous state values. It returns a state object and a
dispatch function, which sends actions to a reducer function to
update the state.

When to use useReducer ?


1. State logic is complex: If you have multiple state values that need
to be updated in response to different actions, or if state changes
depend on the previous state.

2. State needs to be more predictable: useReducer helps manage


state transitions in a way that’s organized, predictable, and easy to
follow, especially when managing more intricate state updates.

3. Multiple actions are needed: When your state needs to change in


different ways depending on different actions (e.g., adding, removing,
or updating values).

Page 2
React js tips

1. Basic Example: Counter

Page 3
React js tips

2. What is the reducer Function?


The reducer function decides how the state changes. It takes:

Components of a Reducer Function:


State:
Represents the current state of your application.
For example, if your app tracks a counter, the state could be
{ count: 0 }.
Action:
An object that describes what you want to do. It typically has
a type property, which is a string (e.g., { type: 'increment' }).
The action can sometimes include additional data
(payload) required to update the state, such as { type:
'setCount', payload: 10 }.
Return Value:
The reducer function processes the action and returns a
new state based on the current state.

Page 4
React js tips

3. Dispatching Actions
The dispatch function is used to send an action to the reducer. Actions
are just objects with a type property that tells the reducer what to do.

Action Object:
The type property in the action object specifies the operation to perform.
For example:
{ type: 'increment' } tells the reducer to increase the count.
{ type: 'decrement' } tells the reducer to decrease the count.

Flow of Dispatch:
When dispatch is called, it sends the action to the reducer.
The reducer then matches the action.type with one of its cases and
updates the state accordingly.

Reducer Behavior:
If dispatch({ type: 'increment' }) is called, the reducer executes the code
in the case 'increment': block, returning a new state with the count
increased.
Similarly, dispatch({ type: 'decrement' }) decreases the count by
executing the case 'decrement': block.

Page 5
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