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

7 amazing websites that will help you improve your CSS skills

πŸ§΅πŸ‘‡

1️⃣ Learn to code HTML and CSS

- Learn how to build beautiful and intuitive websites by way of clear and organized lessons

πŸ–‡οΈ
https://t.co/bl2rx2q8vk


2️⃣ CSS reference

- CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated content

πŸ–‡οΈ https://t.co/XAlj33g1Zk


3️⃣ CSS tutorial

- These tutorials on web design & CSS makes learning this stuff fun and easy

πŸ–‡οΈ https://t.co/y9vAj6fMGk


4️⃣ CSS Layouts

- This site teaches the CSS fundamentals that are used in any website's layout.

πŸ–‡οΈ https://t.co/n4EGLScpDF
5 amazing GitHub repositories for every self taught developer

A Thread 🧡

1️⃣ Computer Science

πŸŽ“ Path to a free self-taught education in Computer Science!

πŸ”—
https://t.co/67jB5zqIes


2️⃣ Free Certifications

Curated list of free courses & certifications

πŸ”— https://t.co/4XtlAVlovs


3️⃣ Free Programming Books

πŸ“š Freely available programming books

πŸ”— https://t.co/eOWLCtwtIV


4️⃣ JavaScript Question

A long list of (advanced) JavaScript questions, and their explanations ✨

πŸ”— https://t.co/UvEl1Esvh3
Five free VS Code extensions that will change the way you do web development:

1. RapidAPI Client

Fulfill all your need for API development.

β€’ Test and consume APIs
β€’ Work with your VS Code theme
β€’ Generate TypeScript, Swift, and Python interfaces from responses.

πŸ”—
https://t.co/FR0QhyTi8v


2. Better Comments

Create more human-friendly comments in your code.

β€’ Alerts
β€’ Queries
β€’ TODOs
β€’ Highlights

πŸ”— https://t.co/AV2BwAMAlL


3. Git Graph

View a Git Graph of your repository and efficiently perform Git actions from the graph.

πŸ”— https://t.co/S5wagmTgsa


4. Peacock

Do you have a habit of keeping multiple VS Code windows open?

Peacock lets you change the color of your VS code even if multiple instances are open.

πŸ”— https://t.co/bmidPkTQOK
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

You May Also Like