How to use map returned by useMap hook in effect dependencies list

[fengkx]

The useMap hook return a MapLike instance doesn't change between render but its methods will trigger render according to the document

Since the map doesn't change between render, The following code doesn't work.

function A() {
  const map = useMap();

  useEffect(() => {
    map.forEach((value, key) => {
      // do something according to the map
      // .....
    });
  }, [map]);
  return (
    <button onClick={() => map.set("foo", "bar")}>
      something change the map
    </button>
  );
}

Though the component renreder when button click, but map has the same reference the useEffect is not run.
How to correctly use the map in dependencies list?

[JoeDuncko]

This is a "problem" you'll see in a lot of react-hookz's hooks implementations, as we try to have stable identities to avoid unnecessary rerenders. This is definitely a case where that can lead to better performance but unexpected results.

Some possible solutions:

Stringify your object/array prop

See https://stackoverflow.com/questions/59467758/passing-array-to-useeffect-dependency-list

Though because you are using a map, which can't be stringified by default, see https://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map#:~:text=You%20can't.,only%20allows%20strings%20as%20keys.

Trigger the effect when setting the value instead

function A() {
  const map = useMap();

  const doSomething = () => {
     map.forEach((value, key) => {
      // do something according to the map
      // .....
    });
  }

  const setMapAndDoSomething = (key, value) => {
    map.set(key, value)

    doSomething()
  }

  return (
    <button onClick={() => setMapAndDoSomething("foo", "bar")}>
      something change the map
    </button>
  );
}