React hooks simplify the process of creating reusable, clean and versatile code, and advanced optimization techniques like memoization are now more accessible and easier to use. React’s official documentation doesn’t cover custom hooks in detail as it covers the basic hooks, so the focus of this article is going to be primarily on building custom React hooks and best practices.

Understanding basic React hooks are required to get the most out of this article. If you aren’t already familiar with the basics, there are numerous great articles out there covering them. For example, React’s official docs are a great place to start.

Mindset

In order to build a versatile, performant and reusable custom hook, there are several things to keep in mind.

Hooks run each time component re-renders

Since we’re working with functional components and hooks, we no longer have the need for lifecycle methods. Each time state or a prop is changed, the functional component is being re-rendered and, thusly, our custom hook is being called over and over again.

Use basic hooks as much as possible

Basic React hooks are the core of any custom hook. We can use memoization and hook dependency arrays to control which parts of our custom hook will change or will not change with each re-render. It’s important to understand the role each basic hook can have in our custom hook in order to use them effectively and build performant hooks.

Rules of hooks

There are a few important rules to keep in mind. These rules are explained in detail on React hooks documentation.

Building the custom hook

Now that we have covered the basics, we’re ready to build our own custom hook. In the following example, we’ll establish a solid pattern for building custom hooks and go through some of the best practices.

Let’s imagine that we’re working on a project where users can play multiple games that use dice rolls as part of their game mechanic. Some games require only a single dice to play and some games may require multiple dice to play. We’ll also assume that during some games, the number of dice used may change.

Keeping that in mind, we are going to build useGameDice hook with the following features:

The custom hook can be initialized with a number of dice being used and an initial value

A function that sets the number of dice being used

A function that rolls the dice. Returns an array of random numbers between 1 and 6. Length is determined by the number of dice being used

A function that resets all dice values to initial value

Setting up the hook (imports and hook function)

We are declaring our custom hook as a regular arrow function using the recommended convention of naming custom hooks — the name should start with the “use” keyword. We are also importing React hooks that we’ll use later on in our implementation. We could also import constants, other functions, other custom hooks, etc.

Our hook can be initialized with 2 optional variables:

initialNumberOfDice — how many dice will be used

— how many dice will be used initialDiceValue — determines the initial value and value after reset

Both variables have a default value of 1 to avoid any errors and simplify the hook setup.

Adding state and memoized private variables

First, we need to set up our state. We’ll declare two simple states:

diceValue — array which size is defined by numberOfDice and holds value for each dice

— array which size is defined by and holds value for each dice numberOfDice — determines the number of dice (diceValue array size) that will be used

We are also initializing initialDiceState variable that creates the initial array value that will be assigned on initial render and state reset. This value is memoized to avoid array being initialized and filled with default values on each re-render.

Adding memoized hook functions

Next, we’ll create the following functions:

generateRandomDiceNumber — generates a random number between 1 and 6 (a single dice roll)

— generates a random number between 1 and 6 (a single dice roll) rollDice — calls a random number generator for each element in the array (dice)

— calls a random number generator for each element in the array (dice) resetDice — resets the dice value state to an initial value

We are using useCallback hook to control when the functions are going to be re-initialized. Functions are re-initialized only when any variable in their dependency array changes. In the case of the generateRandomDiceNumber function, it’s never re-initialized after the first render and initialization because this function doesn’t depend on any external variable or state.

Adding side effects — hook initialization & update

We need to set up a listener that will watch for updates to our initial dice state. This side effect has two responsibilities:

It sets the dice state to the initial value when the hook is first initialized It updates the dice state to the initial value when dice number (array size) has changed

API setup & return statement

Finally, we are defining our state and api objects and returning them in an array, following the useState convention. Let’s take a look at each object:

state — holds all our state values. We expect this object to change on almost every re-render

— holds all our state values. We expect this object to change on almost every re-render api — holds all functions. We are returning some of our functions declared in useCallback and a function from useState hook. This object is memoized because we do not expect this to change on almost every re-render

We are returning the objects in an array because we want this hook to be flexible. By doing so, we allow developers to rename the returned variables and allow them to initialize multiple instances of this hook if needed.

Git repository & demo

You can see the final implementation and full code with a demo on the following GitHub repository.