wrong message when useMemo re-renders

[vzaidman]

In the following case:

const A = () => {
   const obj = useMemo(() => ({
     // something big
  }), [a, b, c, d, e]);

 return <Child  obj={obj} />;
}

when the hook useMemo re-creates obj even if it's deps deep equals, the message says A was re-rendered because if it, where in reality useMemo re-generated obj without a reason, but A is not re-rendered because of this.

[vzaidman]

removed useMemo from being concidered as a reason for re-renders

[o0x2a]

It seems like this issue is still present, here is one for useMemo even if has empty [] dependencies list.

[o0x2a]

Can you confirm this issue? Should this ticket re-opened? @vzaidman

[vzaidman]

are you using the latest version?

[vzaidman]

@Hypnosphi hey!
do you remember why we did this?
Who do we even care if useMemo/useCallback returns a deep equals result?

[o0x2a]

I use v4.3.2, the useMemo is used inside own custom hook, and the custom hook is not tracked by wdyr.

[Hypnosphi]

@vzaidman because we will most likely pass it as a prop after all

[Hypnosphi]

But I agree that those shouldn't be considered reasons for rerender of the component that uses them. I think we can only update dependenciesMap in them, without tracking hook changes

[Hypnosphi]

To be fair, useMemo already was there at the moment of #147

[vzaidman]

OK! I just wanted to make sure.

[vzaidman]

@Hypnosphi now i also see that

dependenciesMap.set(hookResult, get(args, dependenciesPath))

saves the deps of the hook per hook result.

but if a hook simply returns an object that was created anywhere else it might create false positives.

for this reason I will only keep useCallback and remove useMemo from participating in dependenciesMap.

it's rare to return functions from useMemo anyway...

[Hypnosphi]

not so rare:

const throttledCallback = useMemo(() => throttle(callback, timeout), [callback, timeout])

Please don't break this usecase.

What are usecases for returning a function created somewhere else by the way? Why does one even need useMemo for that?

[Hypnosphi]

Also, dependenciesMap can't create false positives, only false negatives: it marks some functions as deeply different

[vzaidman]

gotcha i'll keep it inside.

By the way the throttle example is an anti pattern based on React docs:

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

[Hypnosphi]

What is the recommended way to do that?

[vzaidman]

i think

const [throttledCallback] = useState(() => throttle(callback, timeout))

[vzaidman]

check out https://twitter.com/0xca0a/status/1314326386555924480

[Hypnosphi]

What if both callback and timeout are dynamic?

[vzaidman]

Probably a longer and uglier hook using useRef...

[vzaidman]

this guy built a whole library around it:
https://github.com/alexreardon/use-memo-one

[vzaidman]

@Code-guru @Hypnosphi
released a fix in version v5.0.0-rc.1

[vzaidman]

i'll release version 5 very soon.