useMap

A hook that returns a reactive Map with set, delete, and clear operations that automatically trigger re-renders.

Installation

import { useMap } from 'data-strcture-react-hooks';

Basic Usage

function MyComponent() {
  const map = useMap([['key1', 'value1'], ['key2', 'value2']]);

  return (
    <div>
      <p>Size: {map.size}</p>
      <button onClick={() => map.set('key3', 'value3')}>Add Entry</button>
      <button onClick={() => map.delete('key1')}>Remove Key</button>
    </div>
  );
}

API Reference

Parameters

  • defaultValue ([K, V][]): The initial map entries as an array of key-value pairs

Returns

A reactive Map with set, delete, and clear operations that automatically trigger re-renders when mutated.

Supported Methods

The returned Map supports the following mutating methods:

  • set(key, value) - Sets a key-value pair
  • delete(key) - Removes a key-value pair
  • clear() - Removes all key-value pairs

Non-Mutating Methods

The following methods work as expected but don't trigger re-renders:

  • get(key) - Gets a value by key
  • has(key) - Checks if a key exists
  • keys() - Returns an iterator of keys
  • values() - Returns an iterator of values
  • entries() - Returns an iterator of key-value pairs
  • forEach(callback) - Iterates over all entries

Live Example

Try out the useMap hook with this interactive example:

Current Map:

name→John
age→30
city→New York

Size: 3

Has 'name': Yes

Name value: John

Keys: name, age, city

Values: John, 30, New York

Examples

Basic Map Operations

const map = useMap([['name', 'John'], ['age', 30]]);

// Add entries
map.set('city', 'New York');     // Map(3) { 'name' => 'John', 'age' => 30, 'city' => 'New York' }
map.set('email', 'john@example.com');

// Remove entries
map.delete('age');               // Map(2) { 'name' => 'John', 'city' => 'New York' }

// Clear all
map.clear();                     // Map(0) {}

User Settings Example

function UserSettings() {
  const settings = useMap([
    ['theme', 'dark'],
    ['language', 'en'],
    ['notifications', true]
  ]);

  const toggleTheme = () => {
    const currentTheme = settings.get('theme');
    settings.set('theme', currentTheme === 'dark' ? 'light' : 'dark');
  };

  const toggleNotifications = () => {
    const current = settings.get('notifications');
    settings.set('notifications', !current);
  };

  return (
    <div>
      <h3>Settings</h3>
      <p>Theme: {settings.get('theme')}</p>
      <p>Language: {settings.get('language')}</p>
      <p>Notifications: {settings.get('notifications') ? 'On' : 'Off'}</p>

      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={toggleNotifications}>Toggle Notifications</button>

      <button onClick={() => settings.set('language', 'es')}>
        Set Spanish
      </button>
    </div>
  );
}

Form Data Example

function FormComponent() {
  const formData = useMap([]);
  const [inputKey, setInputKey] = useState('');
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputKey && inputValue) {
      formData.set(inputKey, inputValue);
      setInputKey('');
      setInputValue('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={inputKey}
        onChange={(e) => setInputKey(e.target.value)}
        placeholder="Field name"
      />
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Field value"
      />
      <button type="submit">Add Field</button>

      <div>
        {Array.from(formData.entries()).map(([key, value]) => (
          <div key={key}>
            <strong>{key}:</strong> {value}
            <button onClick={() => formData.delete(key)}>Remove</button>
          </div>
        ))}
      </div>
    </form>
  );
}

How It Works

The useMap hook uses JavaScript's Proxy API to intercept method calls on the Map. When a mutating method (set, delete, clear) is called, it triggers a re-render of the component by updating an internal state variable. This ensures that your UI stays in sync with the Map's state.

TypeScript Support

The hook is fully typed and supports generic types: 

const stringMap = useMap<string, string>([['key', 'value']]);
const numberMap = useMap<string, number>([['count', 42]]);
const mixedMap = useMap<string, any>([['data', { id: 1, name: 'John' }]]);
← Previous: useArray Next: useSet →