React Hooks: useReducer, useCallback, & useMemo

Looking for a great (remote only) React Dev? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

Welcome to my new series on React Hooks. Over the next couple of articles, we’ll be going over Reacts Additional Hooks (not useState and useEffect)

useReducer

useReducer draws it’s inspiration from Redux’s reducer pattern.

useReducer takes three positional arguments — a reducer, its initial state, and a function that can return the initial state — let’s call it init for now. The final argument is optional. You can just pass in the initialState as is (e.g. {count: 0}), but if you want to operate on it in any way, I’d suggest using the init function.

const [state, dispatch] = useReducer(reducer, initialState, init)

The init function will automatically receive initialState as an argument.

const init = initialState => return { count: initialState.count + 1}

useReducer returns state and a dispatch function. You can pass the dispatch function down to other components which should call it with a type. Calling the property type is just a naming convention, but most people use it.

<button onClick={() => dispatch({type…