Is there a benefit to removing existing memoization code?

[rynobax]

I couldn't find any official recommendation on what to do with existing uses of useMemo / useCallback / React.memo after enabling the compiler. Is there any pros/cons to removing them? Or will it always compile to the same thing.

[poteto]

It is generally safe to leave manual memoization in your code – the compiler understands it but will compile in its own lower-level form of memoization even for manually memoized code. The compiler does however check its memoization against manual memoization to ensure that we memoized it exactly the same. The reason we need to do this is in case the manual memoization was used for correctness. For example, if a manually memoized value was passed as a dependency to a useEffect call somewhere else and it wasn't memoized in the same way, this might cause over/under firing of effects or even infinite loops.

For this reason, our current recommendation is to leave manual memoization in for existing code, but for new code written after the compiler is added you can omit them.

There is ongoing research and work being done at the moment for a long term solution to effects. Our team will share more when we have made progress on that front!

[codemonkeynorth]

I have a situation where a useAppFunctions hook returns an object from another hook containing methods dependent on const bus = useBus() (gotoandstop/react-bus) that call bus.emit - these are generally triggered from a button handler eg onClick={() => app.functions.core.nextImage()}

If I don't wrap the methods like nextImage in useCallback and then useMemo on the returned object that contains those methods, then the hook seemingly recreates the returned object

I'm not sure if this is expected, but having the callbacks and memos seems to benefit (i don't think it'll specifically break without them though... it just runs all the hook code again)

Is this a case where the compiler misses memoization because bus is not static?

const useCoreAppFunctions = () => {
  //
  const bus = useBus()
 
// if I remove the useCallback, the object contaiing these methods 
// returned from the hook is not stable 
  const nextImage = useCallback(() => {
    bus.emit(AppCommand.NEXT_IMAGE)
  }, [bus])

full snippet see: https://pastebin.com/dVpZJzdR

So the conclusion that we can just remove all useCallback and useMemo for new apps, I'm not sure is 100% viable.