React Hooks are so powerful and especially some additional hooks.

Do you know there is an alternative to useState called useReducer hook? It is used to manage more complex states.

Let's look into detail ๐Ÿงต๐Ÿ‘‡๐Ÿป

Usually, the useState hook is used to tackle states in React where you can pass the initial state and React preserves state for you between re-renders

What if you need to manage more complex states? Here useReducers comes into play
Similar to useState, the useReducer hook also returns a pair of values. Let's see what these two things are
The first value is `undefined` which is the current state (it is undefined because we didn't pass any initial state in the useReducer hook)

The second value is a dispatch function using which we can update our state.
The useReducer hook accepts 3 parameter

1. reducer
2. Initial state
3. init
Now we know that useReducer takes three parameters and return two values

Here is the complete syntax ๐Ÿ‘‡๐Ÿป
Let's try to see this into action.

I just implemented a basic code here. Basically, I am calling dispatch function on button click which will eventually call reducer function
So far we haven't seen how the state can be managed using this.

Before that one thing to note here is that useReducer is for handling more complex states hence it is recommended to passing the current state as an object
Now we can simply update our state by passing the state parameter in the reducer function.

Something like this ๐Ÿ‘‡๐Ÿป
Now every time I click on the button my state will be incremented by 1 because the reducer function returning the new state by adding one to the previous state.

Play around with it here: https://t.co/6BlaBeul1U
The reducer function accepts the second argument as well known as "action" using which we can tell the reducer function that what operations need to perform on the state.
Generally, we can pass different actions through dispatch to reducer via an object.
This is how you can pass different types of operations in the reducer function using the action parameter.
What if I want to pass some values through dispatch to the reducer function?

Here is "payload" comes into play. It is used to pass the value which represents the payloads of the action.

For example, suppose I want to pass "temp" variable ๐Ÿ‘‡๐Ÿป

https://t.co/6BlaBeul1U
This may sound a little confusing for the first time. Don't worry I created a notes app for you using the useReducer hook.

Check out the code and try to play around with it for better understanding.

https://t.co/TCPEn0W3Pz
I have a video tutorial on YouTube explaining about useReducer in more bit details.

Check it out: https://t.co/nt4hZzInIR
That's pretty much it for this thread. If you like this thread, share it with your connections it means a lot to me ๐Ÿ’–

Peace out ๐Ÿ˜‰

More from Pratham

5 great background websites for every web developer and designer

๐Ÿงต๐Ÿ‘‡


1. Magic pattern

Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.

๐Ÿ–‡๏ธ
https://t.co/ZqczrPfkdZ


2. Cool backgrounds

Collection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers

๐Ÿ–‡๏ธ https://t.co/df7VSb9t8H


3. Gradienta

Use pure CSS gradient backgrounds for your next website or app, as a JPG image or CSS code, no attribute required

๐Ÿ–‡๏ธ https://t.co/R58zrwpZCH


4 Mesh gradient

Creat aurora UI like gradients using few simple clicks

๐Ÿ–‡๏ธ https://t.co/vOHHDASr1V
If you know CSS then you can use these amazing generators and save your time

Thread ๐Ÿงต๐Ÿ‘‡๐Ÿป

1๏ธโƒฃ CSS Box Shadow Generator

- Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects

๐Ÿ”—
https://t.co/6La36IzBLj


2๏ธโƒฃ Glassmorphism

- Generate glassmorphic design easily

๐Ÿ”— https://t.co/qrKqDV5tzY


3๏ธโƒฃ Cool Backgrounds

- Explore a beautifully curated selection of cool backgrounds that you can add to your next project

๐Ÿ”— https://t.co/df7VSaRSh9


4๏ธโƒฃ Pixel art

- Create CSS pixel art, export the results to CSS and download them.

๐Ÿ”— https://t.co/ojD8qwzuhx
5 great code snippet websites for every web developer and designer

๐Ÿงต๐Ÿ‘‡๐Ÿป


1๏ธโƒฃ 30 Seconds of Code

- Short code snippets for all your development needs

๐Ÿ”—
https://t.co/91L4bAxkgF


2๏ธโƒฃ Free Frontend

- Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles

๐Ÿ”— https://t.co/2sIAm73EdZ


3๏ธโƒฃ Little Snippets

- A free collection of HTML and CSS code snippets

๐Ÿ”— https://t.co/qxAyA2wA6U


4๏ธโƒฃ CSS Deck

- Collection of Awesome CSS and JS Creations to help out frontend developers and designers.

๐Ÿ”— https://t.co/LcZYnipvCy
Five great icons websites for every web developer and designer โบ๏ธ

A Thread ๐Ÿงต๐Ÿ‘‡๐Ÿป


1๏ธโƒฃ Icons 8

- Icons8 is just more than icons. You can download illustrations, vector images, music and much more

๐Ÿ–‡๏ธ
https://t.co/inHse0QXBh


2๏ธโƒฃ Icon Monstr

- Black and white themed minimal icons which looks super great. You can also cuatomize the thickness

๐Ÿ–‡๏ธ https://t.co/dbQrJi0IHf


3๏ธโƒฃ Icon Icons

- Over one thousand free icons which you can download as icons or images

๐Ÿ–‡๏ธ https://t.co/h5NlH5fGGr


4๏ธโƒฃ Icons finder

Filter through the worldโ€™s largest marketplace for icons with flexibility and ease. Made up by submissions from top designers around the world, and curated by the team

๐Ÿ–‡๏ธ https://t.co/sqiZ6H9sR7

You May Also Like