DEV Community

JARVUC
JARVUC

Posted on

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

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 ()
}

Enter fullscreen mode Exit fullscreen mode

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)
}

Enter fullscreen mode Exit fullscreen mode

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',
    }
  ]

})
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
blueboy6 profile image
BlueBoy6

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 ;)

Collapse
 
kojiadrianojr profile image
JARVUC • 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.

Collapse
 
calvinmills profile image
Calvin Mills

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.

Collapse
 
kojiadrianojr profile image
JARVUC

Thank's for reading

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

Collapse
 
jaakofalltrade profile image
Jaako

Cool post! Will definitely smash that unicorn button.

Collapse
 
kojiadrianojr profile image
JARVUC

Amazing, you left me nothing but gratitude!

Collapse
 
junibrosas profile image
Juni Brosas

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.

Collapse
 
kojiadrianojr profile image
JARVUC

I agree! The Reducer hook handles complex states and big projects. I still use the state hook for simple projects.

Collapse
 
ejbarba profile image
Elijah Jeremiah L. Barba

Nice post!

Collapse
 
kojiadrianojr profile image
JARVUC

Glad you loved it!