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 best color palette for every web developer and designer 🎨

πŸ§΅πŸ‘‡


1. Color hunt

- Color Hunt is a free and open platform for color inspiration with thousands of trendy hand- picked color palettes

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


2. Adobe color wheel

Explore and create accessible color palettes using color wheel, in variety of color variations and contrast levels. It will tell you automatically if two colors are not accessible

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


3. Palette Ninja

Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds

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


4. My color space

Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! Your space for everything that has to do with color

πŸ–‡οΈ https://t.co/kmjrXOceAj
5 amazing websites that will blow the mind of a developer. Definitely check them out

πŸ§΅πŸ‘‡πŸ»

1️⃣ Animation generator

- Dead simple visual tools to help you generate CSS for your projects.

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


2️⃣ Neural Network Visualizer

- Deep playground is an interactive visualization of neural networks, written in TypeScript using d3.js.

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


3️⃣ Blockchain Demo

- A visual demo of blockchain technology

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


4️⃣ Developer Roadmaps

- Step by step guides and paths to learn different tools or technologies

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

You May Also Like