I prefer Reducer hook over State hook, here's why

#react #javascript #beginners

I've been using State for most of my projects, even created a reusable State method. The State Hook is one of the few basic react hooks that both new react developers (including myself) and veterans uses.

Let's have recap

If you're not familiar with what I'm talking about, here's what the State hook looks like in code.


import React from 'react'

export default () => {
  const [state, setState] = React.useState('')
  return ()
}

Recently, I bumped into Reducer Hook while exploring the wonders of react. It is an alternative for the State Hook. If you're familiar with redux, it is the inspiration for the Reducer Hook.

What is the Reducer Hook?

The Reducer hook accepts a (state, action) and returns a new state paired with a dispatch.

Here's how it goes:

//the initial state to be passed into the Reducer
const initialState = ''

//The reducer function
function reducer(state, action){
  switch(action.type){
    case 'SAY_HELLO':
     return 'HELLO'
    case 'SAY_HI':
     return 'HI'
    default:
     return 'default'
  }
}

//main app
export default app(){
  const [state, dispatch] = React.useReducer(reducer, initialState)
}

I'm getting off topic, this post is about the reasons why Reducer hook over State hook.

WHY I LOVE THE REDUCER HOOK

The Reducer hook can manage complex state shapes like objects or arrays.


const [state, dispatch] = useReducer(reducer, {
  users: [
    {
      name: 'Naruto',
      village: 'leaf',
    }
  ]

})

Plus all the logic is in one reducer.

It's pure function! So it doesn't depends on react.
This hook can be easily managed and to organize, and looks soooooooo damn good, well at least in my opinion
It's easier to test. As I said earlier, It is a pure function. This means this hook doesn't depend on react.

Well I'm not suppose to give my opinion, but give the Reducer Hook a try.

But don't worry State hooks, there's no reason to ditch you and I still appreciate you being here.

Top comments (10)

BlueBoy6 • Dec 18 '19

Well.. i agree that useReducer is a wonderful hook but we can't compare him to useState because theirs uses are differents.
When you're designing your app on atomic design pattern, and you want to give a local statement controller to button or input it's preferable to use a useState hook with handler function who treat the event. It's more readable and clear.
useReducer is more appropriate to be used on app's global statement (with API context for example) or on component's group. To give you a simple example, you don't gonna use redux just to control a checkbox statement, right ?

However it's nice article ;)

JARVUC • Dec 18 '19 • Edited

I super agree! Thank you so much for your input.

To decide what to use between State and Reducer Hook, we need first ask ourselves how complex and big the job is gonna be.

I won't use redux for handling a checkbox statement. As you said, which I totally agree.

Calvin Mills • Dec 18 '19

Couldn't agree more.

I use react-redux for larger applications which need complex state management but for smaller apps or when state is not required outside the context of the component, the reducer hook saves a ton of boilerplate.

JARVUC • Dec 18 '19

Thank's for reading

I could imagine the pain writing such boilerplate for simple task. Good thing there are alternatives we could use.

Jaako • Dec 18 '19

Cool post! Will definitely smash that unicorn button.

JARVUC • Dec 18 '19

Amazing, you left me nothing but gratitude!

Juni Brosas • Dec 18 '19

I use state hook for simple component state structure and speed prototyping. I use reducer hook If I feel like the component state structure will grow.