wrong message when useMemo re-renders about why-did-you-render HOT 22 CLOSED

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

from why-did-you-render.

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

from why-did-you-render.

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

from why-did-you-render.

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

from why-did-you-render.

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

from why-did-you-render.

are you using the latest version?

from why-did-you-render.

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

from why-did-you-render.

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

from why-did-you-render.

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

from why-did-you-render.

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

from why-did-you-render.

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

from why-did-you-render.

OK! I just wanted to make sure.

from why-did-you-render.

@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...

from why-did-you-render.

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?

from why-did-you-render.

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

from why-did-you-render.

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.

from why-did-you-render.

What is the recommended way to do that?

from why-did-you-render.

i think

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

from why-did-you-render.

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

from why-did-you-render.

What if both callback and timeout are dynamic?

from why-did-you-render.

Probably a longer and uglier hook using useRef...

from why-did-you-render.

i'll release version 5 very soon.

from why-did-you-render.