 into the React library, creating cleaner, reusable components has become much easier. Instead of using render props and higher-order components, Hooks provide us a way to share stateful logic across multiple components without making any modifications to an application's component hierarchy. React comes with several built-in Hooks for handling component state and lifecycle, such as 

, that can be composed to create all kinds of different Hooks.

Creating your own custom Hooks can be tricky. Once you decide upon the part of a component to extract out into a separate function as a custom Hook, you need to carefully refactor this stateful logic to...

For example, a Hook that manages authentication should...

Keeping the Hook simple, broad and flexible opens up the components that can use it. In this case, any component that depends on the user's authentication status, such as a navigation bar to determine whether or not to display a login button or a dropdown toggle, can call this Hook and have access to its state and methods, all with a single line.

When done properly, you can even abstract your Hooks into a React Hooks library for other developers to use in their own applications (irrespective of business logic).

Below, I'm going to show you how to implement a custom React hook, 

 object and mimics it's API. This allows your React components to leverage 

 objects without having to worry about low-level details like 

To get started, clone this React Hooks library template from GitHub:

$ git clone -b initial https://github.com/newline-sandbox/react-hooks-library.git

This template has ESLint, TypeScript and Jest already configured so that we can write, lint, test and build the 

 file, which will contain the source code of the 

 objects can set objects as keys. This is quite useful for situations like mapping DOM elements to a corresponding piece of data or functionality. Additionally, 

 objects are iterable, and keys set on the 

 object will not conflict with properties inherited from the 

 Hook's API will closely follow the original React Hooks API of returning a pair of values: the current state and action methods for updating it.

 object as the state and the following action methods for interacting with this object: 

Each time we perform any of these actions on the 

Here's how a component would call this Hook:

const [ map, { setValue, clear, set, delete, initialize } ] = useMap<HTMLElement, string>();

Let's start by implementing the Hook's state and 

import { useState } from "react";

export function useMap(initialState = new Map()) {
  const [map, setMap] = useState(
    Array.isArray(initialState) ? new Map(initialState) : initialState
  );

  const actions = {
    setValue: setMap, // `setMap` is publicly exposed by the Hook as the `setValue` action method.
  };

  return [map, actions];
};

export default useMap;

 object or an array of key-value pairs (entries) to initialize the keys and values of the 

 state variable. If nothing is passed to the Hook, then 

// ...

const clear = () => {
  setMap(() => new Map());
};

const actions = {
  setValue: setMap,
  clear,
};

// ...

 action method, which adds a new key-value pair or replaces an existing key-value pair:

// ...

const set = (key, value) => {
  setMap((aMap) => {
    const copy = new Map(aMap);
    return copy.set(key, value);
  });
};

const actions = {
  setValue: setMap,
  clear,
  set,
};

// ...

// ...

const deleteByKey = (key) => {
  setMap((_map) => {
    const copy = new Map(_map);
    copy.delete(key);
    return copy;
  });
};

const actions = {
  setValue: setMap,
  clear,
  set,
  delete: deleteByKey,
};

// ...

 object based on a passed tuple (or other iterable object).

// ...

const initialize = (mapOrTuple = []) => {
  setMap(() => new Map(mapOrTuple));
};

const actions = {
  setValue: setMap,
  clear,
  set,
  delete: deleteByKey,
  initialize,
};

// ...

If any of these action methods are passed to a child component via props, then anytime 

 changes and causes the calling parent component to re-render, this triggers a re-render of its child components even though none of these methods changed. To prevent this unnecessary re-render, we should wrap each action method with 

import { useCallback, useMemo, useState } from "react";

// ...

const set = useCallback((key, value) => {
  setMap((aMap) => {
    const copy = new Map(aMap);
    return copy.set(key, value);
  });
}, []);

const deleteByKey = useCallback((key) => {
  setMap((_map) => {
    const copy = new Map(_map);
    copy.delete(key);
    return copy;
  });
}, []);

const clear = useCallback(() => {
  setMap(() => new Map());
}, []);

const initialize = useCallback((mapOrTuple = []) => {
  setMap(() => new Map(mapOrTuple));
}, []);

const actions = useMemo(
  () => ({
    setValue: setMap,
    clear,
    set,
    delete: deleteByKey,
    initialize,
  }),
  [clear, deleteByKey, initialize, set]
);

// ...

 state variable can be of any type, they should be 

. Let's denote the generics by the type variable 

 for a value. This type variable preserves the type information of the key-value pairs.

Let's make use of this type variable by defining a type 

// ...

export type MapOrEntries<K, V> = Map<K, V> | [K, V][];

// ...

 function as a generic function and annotate the 

import { useCallback, useMemo, useState } from "react";

export type MapOrEntries<K, V> = Map<K, V> | [K, V][];

export function useMap<K, V>(initialState: MapOrEntries<K, V> = new Map()) {
  const [map, setMap] = useState(
    Array.isArray(initialState) ? new Map(initialState) : initialState
  );

  const set = useCallback((key, value) => {
    setMap((aMap) => {
      const copy = new Map(aMap);
      return copy.set(key, value);
    });
  }, []);

  const deleteByKey = useCallback((key) => {
    setMap((_map) => {
      const copy = new Map(_map);
      copy.delete(key);
      return copy;
    });
  }, []);

  const clear = useCallback(() => {
    setMap(() => new Map());
  }, []);

  const initialize = useCallback((mapOrTuple: MapOrEntries<K, V> = []) => {
    setMap(() => new Map(mapOrTuple));
  }, []);

  const actions = useMemo(
    () => ({
      setValue: setMap,
      clear,
      set,
      delete: deleteByKey,
      initialize,
    }),
    [clear, deleteByKey, initialize, set]
  );

  return [map, actions];
}

export default useMap;

Finally, we need to define a type for the array, consisting of the 

 state variable and the action methods, returned by the Hook.

// ...

export type UseMap<K, V> = [Map<K, V>, UseMapActions<K, V>];

// ...

 type, which provides a type definition for each action method:

import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react";

// ...

export type UseMapActions<K, V> = {
  setValue: Dispatch<SetStateAction<Map<K, V>>>;
  delete: (keyToRemove: K) => void;
  set: (key: K, value: V) => void;
  clear: Map<K, V>["clear"];
  initialize: (pairsOrMap: MapOrEntries<K, V>) => void;
};

// ...

 is a function that returns nothing. This is perfectly valid because this method simply updates the 

import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react";

export type MapOrEntries<K, V> = Map<K, V> | [K, V][];
export type UseMapActions<K, V> = {
  setValue: Dispatch<SetStateAction<Map<K, V>>>;
  delete: (keyToRemove: K) => void;
  set: (key: K, value: V) => void;
  clear: Map<K, V>["clear"];
  initialize: (pairsOrMap: MapOrEntries<K, V>) => void;
};

export type UseMap<K, V> = [Map<K, V>, UseMapActions<K, V>];

export function useMap<K, V>(initialState: MapOrEntries<K, V> = new Map()): UseMap<K, V> {
  const [map, setMap] = useState(
    Array.isArray(initialState) ? new Map(initialState) : initialState
  );

  const set = useCallback((key, value) => {
    setMap((aMap) => {
      const copy = new Map(aMap);
      return copy.set(key, value);
    });
  }, []);

  const deleteByKey = useCallback((key) => {
    setMap((_map) => {
      const copy = new Map(_map);
      copy.delete(key);
      return copy;
    });
  }, []);

  const clear = useCallback(() => {
    setMap(() => new Map());
  }, []);

  const initialize = useCallback((mapOrTuple: MapOrEntries<K, V> = []) => {
    setMap(() => new Map(mapOrTuple));
  }, []);

  const actions = useMemo(
    () => ({
      setValue: setMap,
      clear,
      set,
      delete: deleteByKey,
      initialize,
    }),
    [clear, deleteByKey, initialize, set]
  );

  return [map, actions];
}

export default useMap;

Don't forget to export the types and the Hook inside the 

export { useMap, UseMap, MapOrEntries, UseMapActions } from "./useMap";

For a final version of this Hook, visit the GitHub repository 

Try refactoring your custom React Hooks into a separate React Hooks library, and share them with other team members and/or developers. 

AUTHOR

Ken Chan

Ever since the introduction of Hooks into the React library, creating cleaner, reusable components has become much easier. Instead of using render props and higher-order components, Hooks provide us a way to share stateful logic across multiple components without making any modifications to an…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Implementing a useMap React Hook

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript