React: Introduction to useReducer hook

Dennis San Jose — Wed, 13 Jul 2022 07:00:25 +0000

In this article, I'm assuming that you have at least some knowledge of using React and want to explore React Hooks.

useReducer

This hook is used to handle complex state in our application. Inspired by redux state management pattern (If you're not familiar with redux you can check it here). It is used to store and update states, just like the useState hook. It accepts reducer function as its first parameter and the initial state as the second.

It returns an array that holds the current value and a dispatch function in which you can pass an action to the reducer function.

Syntax:

const [state, dispatch] = useReducer(reducerFn, initialState)

state - value of the current state.

dispatch - is the method that will be used to call the reducerFn. It accepts an object that represents the type of action. Send the type of action to the reducer function and update the state.

reducerFn - a function that returns some state data, triggered by action type.

initialState - initial value of state.

Understand by Example

In the following example, we will create a simple app that will increment and decrement counter by pressing the button. We will be using the useReducer for this.

import { useReducer } from 'react';

const initialState = {
  counter: 0
};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, counter: state.counter + 1 };
    case 'decrement':
        return { ...state, counter: state.counter - 1 };
    default:
      throw new Error();
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div style={{ margin: 12 }}>
      <div> {state.counter}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>

    </div>
  );
}

export default MyComponent;

Here we import the useReducer hook at the top of the component. We define the initialState and reducer function outside our component since all the values will be passed using the dispatch method.

The reducer function takes two arguments: state and action. state holds the value of current state, on initial render it's value is the initialState object, and action is used to check what action which condition to trigger. type is the property we’re passing from the dispatch action to determine which condition to trigger inside the reducer function.

The component will be re-rendered every time counter state value changes.

When to use useReducer?

In the above code example, you can see that useReducer implementation is much longer than useState hook. It is prefer to use useReducer if the state of component has a complex structure, think of object with many properties.

Is useReducer a replacement for Redux?

The answer is No. It is not intended to replace redux, instead it should be used in components that have complex state logic on it. Some might tend to think that useReducer feature is intended to replace the redux. In fact, useReducer is restricted to component only.

And that's all folks. Thanks for reading!

If you have any question or feedback. Feel free to comment below.

React: Introduction to useEffect hook

Dennis San Jose — Tue, 05 Jul 2022 14:33:21 +0000

In this article, I'm assuming that you have at least some knowledge of using React and want to explore React Hooks.

Introduction

useEffect is one of the known hooks in React application. Some call it the “Effect Hook”. This hook allows you to perform side effects in functional components. It handles componentDidMount, componentDidUpdate and componentWillUnmount all in one call.

In case you are not familiar with Side Effect. It is any execution that is outside the scope of the function being executed. We will not cover much about side effect in this article.

Examples of side effects are:

Fetching data
Manual DOM Manipulation
Setting up a subscription
Updating global variables

Question: When useEffect runs?

By default it usually run after very render. But there are ways to control it. Let's look at how to run code after the component mounts (componentDidMount), after it re-renders (componentDidUpdate) , and before it unmount (componentWillUnmount)

To run it only once after the component has been mounted, you can do it like this.

// Make sure to pass an empty array on the second argument
useEffect(() => {
  console.log(‘Component Mounted!’); // This will trigger only once.
}, []);

To run it every time a props/state variable changes, you can add an array of variables to the second argument:

// Pass a variable to the second argument, and every time that variable changes this useEffect will run.
useEffect(() => {
  console.log(‘Counter’, counter); // This will trigger every time counter state changes.
}, [counter]);

If you want to do some cleanup when the component unmount, you can do it like this.

useEffect(() => {
    // Run on Component Mount
    const handleAuthorSubscription = author => {
      setAuthor(author);
    }
    API.subscribeToAuthor(userId, handleAuthorSubscriptionChange);

    // Run on Component Unmount
    return () => {
      API.unSubscribeToAuthor(userId, handleAuthorSubscriptionChange);
    };
  }, []);

You just need to add a return function to a useEffect callback function, code inside that returned function will get triggered when a component unmount from a DOM. We use this function to do a cleanup just like removing eventListeners, clearInterval, clearTimeout, etc.

Things to remember in useEffect

First argument is a callback function. Inside of it, we can perform any side effect there and set some data in state variables.
Second Argument: Array contains data, useEffect will get triggered every time any data of that array changes. Passing an empty array will trigger the useEffect after the component has been mounted.

And that is all I wanted to share with you. This is my very first article. Hopefully you find this article helpful in learning some basics of React Hooks. If you have any question or feedback for improvement, feel free to comment you're all welcome.

Thanks for Reading! :)

DEV Community: Dennis San Jose