rich-text-editor
Version:
Rich text editor
34 lines (33 loc) • 1.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = useMap;
const react_1 = require("react");
/**
* An ES6 `Map` object that's bound to a React state.
*
* Mutations on the returned object will cause a rerender.
*/
function useMap(initial) {
// React always decides whether it should rerender by comparing the old vs
// new state *by reference*. This hook informs React of the Map mutations
// (e.g. "set" or "delete") by mutating the Map and then setting the state
// to *a brand new object* which has a reference to the mutated Map.
const [obj, setObj] = (0, react_1.useState)({ current: new Map(initial) });
function mutate(fn) {
setObj((map) => {
fn(map.current);
// The Map referenced by `current` is the same but the Object we return
// is different from the old state, so React will rerender!
return { current: map.current };
});
}
return {
/** The underlying Map object. **Mutating this won't cause a rerender!** */
raw: obj.current,
has: obj.current.has.bind(obj.current),
get: obj.current.get.bind(obj.current),
values: obj.current.values.bind(obj.current),
set: (key, value) => mutate((map) => map.set(key, value)),
delete: (key) => mutate((map) => map.delete(key)),
};
}