---
title: "useMap – State Hook Usage & Examples"
description: "React state hook that manages a Map."
canonical: https://reactuse.com/state/usemap/
---

# useMap

React state hook that manages a Map

`useMap` wraps a JavaScript `Map` in React state and exposes a rich set of methods: `set`, `get`, `remove`, `has`, `clear`, and `reset`, along with the current `map` instance and its `size`. Mutations through these methods trigger re-renders automatically. The initial value can be a `Map` instance, an array of key-value pairs, or a factory function.

### When to Use

- Managing key-value collections (e.g., selected items, tag mappings, lookup tables) that change frequently
- Building dynamic forms or configuration editors where entries are added and removed at runtime
- Any scenario where you need `Map` semantics (ordered keys, non-string keys) with reactive state updates

### Notes

- **Immutable updates**: Each mutation creates a new `Map` instance internally so React detects the state change and re-renders.
- **Reset support**: The `reset` function restores the map to its initial value, which is useful for "undo" or "clear filters" actions.
- **SSR-safe**: Uses only React state internally with no browser API dependencies.

## Usage

```tsx live
function Demo() {
  const { map, set, get, remove, has, clear, reset, size } = useMap([
    ['react', '18.0.0'],
    ['vue', '3.0.0'],
  ]);

  return (
    <div>
      <p>Map size: {size}</p>
      <div style={{ marginBottom: 16 }}>
        <button
          type="button"
          onClick={() => set('angular', '16.0.0')}
          style={{ marginRight: 8 }}
        >
          Add Angular
        </button>
        <button
          type="button"
          onClick={() => set('react', '18.2.0')}
          style={{ marginRight: 8 }}
        >
          Update React
        </button>
        <button
          type="button"
          onClick={() => remove('vue')}
          style={{ marginRight: 8 }}
        >
          Remove Vue
        </button>
        <button
          type="button"
          onClick={clear}
          style={{ marginRight: 8 }}
        >
          Clear All
        </button>
        <button
          type="button"
          onClick={reset}
          style={{ marginRight: 8 }}
        >
          Reset
        </button>
      </div>
      <div>
        <p>Current entries:</p>
        <ul>
          {Array.from(map.entries()).map(([key, value]) => (
            <li key={key}>
              {key}: {value} 
              {has(key) && ' ✓'}
            </li>
          ))}
        </ul>
      </div>
      <div>
        <p>Get React version: {get('react') || 'Not found'}</p>
      </div>
    </div>
  );
};
```

%%API%%