I have useMemo
when one of its dependencies is an Object
that I get from the server, so even when the content of the object is the same - the useMemo
is called over and over again in each sync from the server because the object itself is different every time, of course it is the same for useCallback
and React.memo
.
How can I solve this?
I was thinking about checking manually if the new result has the same contents as the previous result and if it does - stay with the previous object reference.
Two options really:
deep-equal
on npm) to the object you receive:
const [obj, setObj] = React.useState();
// ...
const newObj = await getObjectFromServer();
// Using the function form of setState to avoid races and an extra
// dependency on `obj`:
setObj(oldObj => equal(newObj, oldObj) ? oldObj : newObj);
memo
uses, not the full object:
React.useMemo(() => obj.foo + 8, [obj]);
React.useMemo(() => obj.foo + 8, [obj.foo]);
obj.foo
itself is not a primitive.