 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. 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Implementing a <code>useMap</code>&nbsp;React Hook</h1><p>Ever since the introduction of <a href="https://reactjs.org/docs/hooks-reference.html" rel="noopener noreferrer nofollow">Hooks</a> 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 <code>useState</code> and <code>useEffect</code>, that can be composed to create all kinds of different Hooks.</p><p>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...</p><ul><li><p>Account for other components in the application that may call this Hook. </p></li><li><p>Rewrite as little of the affected components as possible.</p></li><li><p>Avoid common problems like triggering unnecessary re-renders.</p></li></ul><p>For example, a Hook that manages authentication should...</p><ul><li><p>Contain state that tracks the current user (<code>null</code> if not logged in or an object with the user's information if logged in).</p></li><li><p>Return, at the very least, the user's information and methods for logging in and logging out the user. </p></li><li><p>Check the user's authentication status upon the mounting of its calling component.</p></li><li><p>Subscribe to an event that periodically checks the user's authentication status and updates the Hook's state accordingly.</p></li></ul><p>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.</p><p>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).</p><p>Below, I'm going to show you how to implement a custom React hook, <code>useMap</code>, within a React Hooks library. The <code>useMap</code> Hook wraps around a <code>Map</code> object and mimics it's API. This allows your React components to leverage <code>Map</code> objects without having to worry about low-level details like <code>try...catch</code> error handling.</p><h2 class="heading-anchor-text" id="installation-and-setup"><span>Installation and Setup</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#installation-and-setup">#</a></h2><p>To get started, clone this React Hooks library template from GitHub:</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/x-sh" data-uniqueid="cm-CJIH3mqk5dPHtYsgX4xvB" id="cm-CJIH3mqk5dPHtYsgX4xvB">$ git clone -b initial https://github.com/newline-sandbox/react-hooks-library.git</textarea><p>This template has ESLint, TypeScript and Jest already configured so that we can write, lint, test and build the <code>useMap</code> Hook for distribution.</p><p>Within the <code>src</code> directory, create a <code>useMap.ts</code> file, which will contain the source code of the <code>useMap</code> Hook.</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/x-sh" data-uniqueid="cm-CGP74qCZBSijhkoo-pgKT" id="cm-CGP74qCZBSijhkoo-pgKT">$ touch src/useMap.ts</textarea><h2 class="heading-anchor-text" id="writing-the-usemap-hook"><span>Writing the <code>useMap</code> Hook</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#writing-the-usemap-hook">#</a></h2><p>Unlike plain JavaScript objects, <code>Map</code> 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, <code>Map</code> objects are iterable, and keys set on the <code>Map</code> object will not conflict with properties inherited from the <code>Object</code> prototype like <code>toString</code> and <code>constructor</code>.</p><p>The <code>useMap</code> 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.</p><p>The Hook will return a <code>Map</code> object as the state and the following action methods for interacting with this object: </p><ul><li><p><code>setValue</code> - Sets the <code>Map</code> object to a new <code>Map</code> object.</p></li><li><p><code>clear</code> - Replaces the <code>Map</code> object with a new, empty <code>Map</code> object.</p></li><li><p><code>set</code> - Sets the <code>Map</code> object to a copy of itself, but with a newly added key-value pair (or a replaced key-value pair).</p></li><li><p><code>delete</code> - Sets the <code>Map</code> object to a copy of itself, but with a deleted key-value pair. </p></li><li><p><code>initialize</code> - Sets the <code>Map</code> object to a <code>Map</code> object initialized with a tuple (or another iterable object).</p></li></ul><p>Each time we perform any of these actions on the <code>Map</code> object, we create a new instance of a <code>Map</code> object to make it immutable to change.</p><p>Here's how a component would call this Hook:</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-PRFEDF9j3ZTYDFG6X94SX" id="cm-PRFEDF9j3ZTYDFG6X94SX">const [ map, { setValue, clear, set, delete, initialize } ] = useMap&lt;HTMLElement, string&gt;();</textarea><p><em>Note</em>: In the above code, the <code>Map</code> object maps DOM elements to strings.</p><p>Let's start by implementing the Hook's state and <code>setValue</code> action method:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-YhkxR02LyJi_LpNweOdjp" id="cm-YhkxR02LyJi_LpNweOdjp">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;</textarea><p>The Hook can be passed a <code>Map</code> object or an array of key-value pairs (entries) to initialize the keys and values of the <code>map</code> state variable. If nothing is passed to the Hook, then <code>initialState</code> is set to a new, empty <code>Map</code> object by default.</p><p>Define the <code>clear</code> action method, which empties the <code>Map</code> object of its key-value pairs:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-Or2wr9Ce9OI171l16jFIP" id="cm-Or2wr9Ce9OI171l16jFIP">// ...

const clear = () =&gt; {
  setMap(() =&gt; new Map());
};

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

// ...</textarea><p>Define the <code>set</code> action method, which adds a new key-value pair or replaces an existing key-value pair:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-2k6n90ZeqGFxL6oPI3F2R" id="cm-2k6n90ZeqGFxL6oPI3F2R">// ...

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

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

// ...</textarea><p>Define the <code>deleteByKey</code> action method (publicly exposed as <code>delete</code>), which deletes a key-value pair: </p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-gWeCl9kZsKKBC55HWSJm8" id="cm-gWeCl9kZsKKBC55HWSJm8">// ...

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

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

// ...</textarea><p>Define the <code>initialize</code> action method, which initializes <code>map</code> to a new <code>Map</code> object based on a passed tuple (or other iterable object).</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-7rTIu46oESmP94L2TPQAO" id="cm-7rTIu46oESmP94L2TPQAO">// ...

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

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

// ...</textarea><p>If any of these action methods are passed to a child component via props, then anytime <code>map</code> 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 <code>useCallback</code> and memoize the <code>actions</code> object with <code>useMemo</code>, like so:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-xnc3R5HvRmkAdapflVktV" id="cm-xnc3R5HvRmkAdapflVktV">import { useCallback, useMemo, useState } from "react";

// ...

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

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

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

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

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

// ...</textarea><h2 class="heading-anchor-text" id="annotating-the-usemap-hook"><span>Annotating the <code>useMap</code> Hook</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#annotating-the-usemap-hook">#</a></h2><p>Since the keys and values of the <code>map</code> state variable can be of any type, they should be <em>generically typed</em>. Let's denote the generics by the type variable <code>&lt;K, V&gt;</code>: <code>K</code> for a key and <code>V</code> for a value. This type variable preserves the type information of the key-value pairs.</p><p>Let's make use of this type variable by defining a type <code>MapOrEntries</code> that describes...</p><ul><li><p>A <code>Map</code> object. It could be the <code>map</code> state variable, the <code>Map</code> object passed as the <code>initialState</code> or used for initializing the <code>map</code> state variable via the <code>initialize</code> method, etc.</p></li><li><p>The entries (the array of key-value pairs) used for initializing the <code>map</code> state variable.</p></li></ul><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-53aDHaWlNJpfv89LDkRG2" id="cm-53aDHaWlNJpfv89LDkRG2">// ...

export type MapOrEntries&lt;K, V&gt; = Map&lt;K, V&gt; | [K, V][];

// ...</textarea><p>Rewrite the <code>useMap</code> function as a generic function and annotate the <code>initialState</code> and <code>mapOrTuple</code> parameters with this type, like so:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-KmPwXM8abMhFv5xk1YuEC" id="cm-KmPwXM8abMhFv5xk1YuEC">import { useCallback, useMemo, useState } from "react";

export type MapOrEntries&lt;K, V&gt; = Map&lt;K, V&gt; | [K, V][];

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

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

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

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

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

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

  return [map, actions];
}

export default useMap;</textarea><p>Finally, we need to define a type for the array, consisting of the <code>map</code> state variable and the action methods, returned by the Hook.</p><p>Name this type <code>UseMap</code>, and define it as the following:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-d3M9ZbKRhBSC9_1BxY6cs" id="cm-d3M9ZbKRhBSC9_1BxY6cs">// ...

export type UseMap&lt;K, V&gt; = [Map&lt;K, V&gt;, UseMapActions&lt;K, V&gt;];

// ...</textarea><p>Now, define the <code>UseMapActions</code> type, which provides a type definition for each action method:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-z4MN86OvPfAAKpnMjJRuP" id="cm-z4MN86OvPfAAKpnMjJRuP">import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react";

// ...

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

// ...</textarea><p>The <code>Dispatch</code> type tells TypeScript that <code>setValue</code> is a function that returns nothing. This is perfectly valid because this method simply updates the <code>map</code> state variable. That's it.</p><p>The <code>SetStateAction</code> type tells TypeScript that <code>setValue</code> can be passed either...</p><ul><li><p>An explicit value that it can update the <code>map</code> state variable to.</p></li><li><p>A function with the previous value as the argument that returns the value with which to update the <code>map</code> state variable to.</p></li></ul><p>Altogether...</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-x8jecXSRoGDuMQVUgMD6h" id="cm-x8jecXSRoGDuMQVUgMD6h">import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react";

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

export type UseMap&lt;K, V&gt; = [Map&lt;K, V&gt;, UseMapActions&lt;K, V&gt;];

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

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

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

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

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

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

  return [map, actions];
}

export default useMap;</textarea><p>Don't forget to export the types and the Hook inside the <code>src/index.ts</code> file!</p><p>(<code>src/index.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-iWyEbg8OkSeVJX2fNb5G8" id="cm-iWyEbg8OkSeVJX2fNb5G8">export { useMap, UseMap, MapOrEntries, UseMapActions } from "./useMap";</textarea><p>For a final version of this Hook, visit the GitHub repository <a href="https://github.com/newline-sandbox/react-hooks-library/tree/use-map" rel="noopener noreferrer nofollow">here</a>.</p><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#next-steps">#</a></h2><p>Try refactoring your custom React Hooks into a separate React Hooks library, and share them with other team members and/or developers. </p><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#sources">#</a></h2><ul><li><p><a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React Documentation</a></p></li></ul><p></p>

AUTHOR

Ken Chan

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

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Implementing a <code>useMap</code>&nbsp;React Hook</h1><p>Ever since the introduction of <a href="https://reactjs.org/docs/hooks-reference.html" rel="noopener noreferrer nofollow">Hooks</a> 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 <code>useState</code> and <code>useEffect</code>, that can be composed to create all kinds of different Hooks.</p><p>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...</p><ul><li><p>Account for other components in the application that may call this Hook. </p></li><li><p>Rewrite as little of the affected components as possible.</p></li><li><p>Avoid common problems like triggering unnecessary re-renders.</p></li></ul><p>For example, a Hook that manages authentication should...</p><ul><li><p>Contain state that tracks the current user (<code>null</code> if not logged in or an object with the user's information if logged in).</p></li><li><p>Return, at the very least, the user's information and methods for logging in and logging out the user. </p></li><li><p>Check the user's authentication status upon the mounting of its calling component.</p></li><li><p>Subscribe to an event that periodically checks the user's authentication status and updates the Hook's state accordingly.</p></li></ul><p>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.</p><p>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).</p><p>Below, I'm going to show you how to implement a custom React hook, <code>useMap</code>, within a React Hooks library. The <code>useMap</code> Hook wraps around a <code>Map</code> object and mimics it's API. This allows your React components to leverage <code>Map</code> objects without having to worry about low-level details like <code>try...catch</code> error handling.</p><h2 class="heading-anchor-text" id="installation-and-setup"><span>Installation and Setup</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#installation-and-setup">#</a></h2><p>To get started, clone this React Hooks library template from GitHub:</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/x-sh" data-uniqueid="cm-CJIH3mqk5dPHtYsgX4xvB" id="cm-CJIH3mqk5dPHtYsgX4xvB">$ git clone -b initial https://github.com/newline-sandbox/react-hooks-library.git</textarea><p>This template has ESLint, TypeScript and Jest already configured so that we can write, lint, test and build the <code>useMap</code> Hook for distribution.</p><p>Within the <code>src</code> directory, create a <code>useMap.ts</code> file, which will contain the source code of the <code>useMap</code> Hook.</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/x-sh" data-uniqueid="cm-CGP74qCZBSijhkoo-pgKT" id="cm-CGP74qCZBSijhkoo-pgKT">$ touch src/useMap.ts</textarea><h2 class="heading-anchor-text" id="writing-the-usemap-hook"><span>Writing the <code>useMap</code> Hook</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#writing-the-usemap-hook">#</a></h2><p>Unlike plain JavaScript objects, <code>Map</code> 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, <code>Map</code> objects are iterable, and keys set on the <code>Map</code> object will not conflict with properties inherited from the <code>Object</code> prototype like <code>toString</code> and <code>constructor</code>.</p><p>The <code>useMap</code> 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.</p><p>The Hook will return a <code>Map</code> object as the state and the following action methods for interacting with this object: </p><ul><li><p><code>setValue</code> - Sets the <code>Map</code> object to a new <code>Map</code> object.</p></li><li><p><code>clear</code> - Replaces the <code>Map</code> object with a new, empty <code>Map</code> object.</p></li><li><p><code>set</code> - Sets the <code>Map</code> object to a copy of itself, but with a newly added key-value pair (or a replaced key-value pair).</p></li><li><p><code>delete</code> - Sets the <code>Map</code> object to a copy of itself, but with a deleted key-value pair. </p></li><li><p><code>initialize</code> - Sets the <code>Map</code> object to a <code>Map</code> object initialized with a tuple (or another iterable object).</p></li></ul><p>Each time we perform any of these actions on the <code>Map</code> object, we create a new instance of a <code>Map</code> object to make it immutable to change.</p><p>Here's how a component would call this Hook:</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-PRFEDF9j3ZTYDFG6X94SX" id="cm-PRFEDF9j3ZTYDFG6X94SX">const [ map, { setValue, clear, set, delete, initialize } ] = useMap&lt;HTMLElement, string&gt;();</textarea><p><em>Note</em>: In the above code, the <code>Map</code> object maps DOM elements to strings.</p><p>Let's start by implementing the Hook's state and <code>setValue</code> action method:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-YhkxR02LyJi_LpNweOdjp" id="cm-YhkxR02LyJi_LpNweOdjp">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;</textarea><p>The Hook can be passed a <code>Map</code> object or an array of key-value pairs (entries) to initialize the keys and values of the <code>map</code> state variable. If nothing is passed to the Hook, then <code>initialState</code> is set to a new, empty <code>Map</code> object by default.</p><p>Define the <code>clear</code> action method, which empties the <code>Map</code> object of its key-value pairs:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-Or2wr9Ce9OI171l16jFIP" id="cm-Or2wr9Ce9OI171l16jFIP">// ...

const clear = () =&gt; {
  setMap(() =&gt; new Map());
};

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

// ...</textarea><p>Define the <code>set</code> action method, which adds a new key-value pair or replaces an existing key-value pair:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-2k6n90ZeqGFxL6oPI3F2R" id="cm-2k6n90ZeqGFxL6oPI3F2R">// ...

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

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

// ...</textarea><p>Define the <code>deleteByKey</code> action method (publicly exposed as <code>delete</code>), which deletes a key-value pair: </p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-gWeCl9kZsKKBC55HWSJm8" id="cm-gWeCl9kZsKKBC55HWSJm8">// ...

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

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

// ...</textarea><p>Define the <code>initialize</code> action method, which initializes <code>map</code> to a new <code>Map</code> object based on a passed tuple (or other iterable object).</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-7rTIu46oESmP94L2TPQAO" id="cm-7rTIu46oESmP94L2TPQAO">// ...

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

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

// ...</textarea><p>If any of these action methods are passed to a child component via props, then anytime <code>map</code> 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 <code>useCallback</code> and memoize the <code>actions</code> object with <code>useMemo</code>, like so:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-xnc3R5HvRmkAdapflVktV" id="cm-xnc3R5HvRmkAdapflVktV">import { useCallback, useMemo, useState } from "react";

// ...

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

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

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

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

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

// ...</textarea><h2 class="heading-anchor-text" id="annotating-the-usemap-hook"><span>Annotating the <code>useMap</code> Hook</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#annotating-the-usemap-hook">#</a></h2><p>Since the keys and values of the <code>map</code> state variable can be of any type, they should be <em>generically typed</em>. Let's denote the generics by the type variable <code>&lt;K, V&gt;</code>: <code>K</code> for a key and <code>V</code> for a value. This type variable preserves the type information of the key-value pairs.</p><p>Let's make use of this type variable by defining a type <code>MapOrEntries</code> that describes...</p><ul><li><p>A <code>Map</code> object. It could be the <code>map</code> state variable, the <code>Map</code> object passed as the <code>initialState</code> or used for initializing the <code>map</code> state variable via the <code>initialize</code> method, etc.</p></li><li><p>The entries (the array of key-value pairs) used for initializing the <code>map</code> state variable.</p></li></ul><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-53aDHaWlNJpfv89LDkRG2" id="cm-53aDHaWlNJpfv89LDkRG2">// ...

export type MapOrEntries&lt;K, V&gt; = Map&lt;K, V&gt; | [K, V][];

// ...</textarea><p>Rewrite the <code>useMap</code> function as a generic function and annotate the <code>initialState</code> and <code>mapOrTuple</code> parameters with this type, like so:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-KmPwXM8abMhFv5xk1YuEC" id="cm-KmPwXM8abMhFv5xk1YuEC">import { useCallback, useMemo, useState } from "react";

export type MapOrEntries&lt;K, V&gt; = Map&lt;K, V&gt; | [K, V][];

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

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

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

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

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

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

  return [map, actions];
}

export default useMap;</textarea><p>Finally, we need to define a type for the array, consisting of the <code>map</code> state variable and the action methods, returned by the Hook.</p><p>Name this type <code>UseMap</code>, and define it as the following:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-d3M9ZbKRhBSC9_1BxY6cs" id="cm-d3M9ZbKRhBSC9_1BxY6cs">// ...

export type UseMap&lt;K, V&gt; = [Map&lt;K, V&gt;, UseMapActions&lt;K, V&gt;];

// ...</textarea><p>Now, define the <code>UseMapActions</code> type, which provides a type definition for each action method:</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-z4MN86OvPfAAKpnMjJRuP" id="cm-z4MN86OvPfAAKpnMjJRuP">import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react";

// ...

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

// ...</textarea><p>The <code>Dispatch</code> type tells TypeScript that <code>setValue</code> is a function that returns nothing. This is perfectly valid because this method simply updates the <code>map</code> state variable. That's it.</p><p>The <code>SetStateAction</code> type tells TypeScript that <code>setValue</code> can be passed either...</p><ul><li><p>An explicit value that it can update the <code>map</code> state variable to.</p></li><li><p>A function with the previous value as the argument that returns the value with which to update the <code>map</code> state variable to.</p></li></ul><p>Altogether...</p><p>(<code>src/useMap.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-x8jecXSRoGDuMQVUgMD6h" id="cm-x8jecXSRoGDuMQVUgMD6h">import { Dispatch, SetStateAction, useCallback, useMemo, useState } from "react";

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

export type UseMap&lt;K, V&gt; = [Map&lt;K, V&gt;, UseMapActions&lt;K, V&gt;];

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

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

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

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

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

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

  return [map, actions];
}

export default useMap;</textarea><p>Don't forget to export the types and the Hook inside the <code>src/index.ts</code> file!</p><p>(<code>src/index.ts</code>)</p><textarea data-iscodemirror="true" class="d-none" data-mode="javascript" data-uniqueid="cm-iWyEbg8OkSeVJX2fNb5G8" id="cm-iWyEbg8OkSeVJX2fNb5G8">export { useMap, UseMap, MapOrEntries, UseMapActions } from "./useMap";</textarea><p>For a final version of this Hook, visit the GitHub repository <a href="https://github.com/newline-sandbox/react-hooks-library/tree/use-map" rel="noopener noreferrer nofollow">here</a>.</p><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#next-steps">#</a></h2><p>Try refactoring your custom React Hooks into a separate React Hooks library, and share them with other team members and/or developers.</p><p></p><p> </p><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#sources">#</a></h2><ul><li><p><a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React Documentation</a></p></li></ul><p></p>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Implementing a useMap React Hook

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript