Hi, Good afternoon.

I've been using the Hooks API after a few days that is was released.
And it took me a lot of time to realize that I've been using the useState Hook all the time and everywhere in my code.

Maybe I can change my code to look like this to make it look cleaner.

Yea it looks like it's cleaner than the first one. But one day I go back to the docs and after reading for a few minutes and realize that useState is not meant for objects or any complex data. The Hook for that usage is useReducer.

Basically, the useReducer Hook takes a function as a first argument which is the reducer and second which is the initial state. The reducer is a pure function that takes the previous state and an action and returns the next state
or the updated state based on the action that was dispatch. If you used Redux before then you know what I'm talking about.

Here's the Updated Code using the useReducer Hook.

The important thing to remember here is to Read the Documentation.
Sometimes there's some words or concepts that you can't understand in the docs but that is expected in this field we don't everything but Reading and Understanding the documentation will make you a better developer.

Thanks 😄!
Have a Good Day Everyone 👍.