Use Map as React state



useMap returns Map object that can be used as React state – set, clear and delete methods update state and trigger rerender.

PageViews last month
import { IconPlus, IconTrash } from '@tabler/icons-react';
import { ActionIcon, Group, Table } from '@mantine/core';
import { useMap } from '@mantine/hooks';

function Demo() {
  const map = useMap([
    ['/hooks/use-media-query', 4124],
    ['/hooks/use-clipboard', 8341],
    ['/hooks/use-fetch', 9001],

  const rows = Array.from(map.entries()).map(([key, value]) => (
    <Table.Tr key={key}>
          <ActionIcon variant="default" onClick={() => map.set(key, value + 1)} fw={500}>
            <IconPlus stroke={1.5} size={18} />
          <ActionIcon variant="default" onClick={() => map.delete(key)} c="red">
            <IconTrash stroke={1.5} size={18} />

  return (
    <Table layout="fixed">
          <Table.Th>Views last month</Table.Th>
          <Table.Th />


function useMap<T, V>(initialState?: [T, V][]): Map<T, V>;