useReducer and useContext

hwangs12

hwangs12

Posted on August 31, 2021

useReducer and useContext

They are cool tools in a way that you realize useState and useEffect are cool but not to the degree that useReducer and useContext simplify your codes in cleaner fashion.
I guess cool things about React in general is that once you learn new topic, you don't have to go back much to basics because every new concept is designed such that you can make sense of it intuitively and you can start from the point you learned it, without going back too much to basics.

useReducer and useContext are such tools that make me think 'Oh, I didn't have to use previous hooks (i.e. useState) that much if I could use useReducer!' but sort of appreciate learning useState at the same time because I can make analogies to useState when learning useReducer. Learning useState definitely helped me in understanding useReducer so I could learn useReducer faster.

How it can be confusing and how I have dissected useReducer

First of all, useReducer consists of four words

const [state, dispatch] = useReducer(reducer, initialState)
Enter fullscreen mode Exit fullscreen mode

Now, notice the similarity to useState hook

const [state, setState] = useState(initialState)
Enter fullscreen mode Exit fullscreen mode

The only difference is it has weird things like 'dispatch' and 'reducer'

To simplify and help understand the concept intuitively, my way of devising their terms are as follows:

dispatch is almost same as setState
reducer is a function that describes action and takes setState as argument to change the state

💖 💪 🙅 🚩
hwangs12
hwangs12

Posted on August 31, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

useReducer and useContext
react useReducer and useContext

August 31, 2021