Hacker News Reader

Comment by dragonwriter | Hacker News Reader

> Bragging that you can't understand the difference between useMemo and useCallback after reading the docs (one is general memoization and the other is function-specific) isn't a dig at the framework so much as an indictment of the author.

Yeah, it is fairly obvious (though, to be fair, it wouldn't hurt to point it out) that:

  useCallback((...args) => {
    <*statements*>
  }, [<*deplist*>] );

is effectively identical to:

  useMemo(() => (...args) => {
    <*statements*>
  }, [<*deplist*>]);

View on HN

Are they "effectively" identical or they just identical? What's the difference?

Effectively as in "they have the same effect". The difference was stated in the comment that you replied to: One is for general memoization, the other just for functions. You can use useMemo exclusively if you prefer.

But it does reflect so much that’s wrong with the React development.

Creating a first class hook whose only purpose is to wrap another first class hook, all so you can pass in a function rather than a function that returns a function.

I hear what you’re saying. I think in the abstract it seems like an unnecessary helper function. But in a historical context it makes sense.

About a year before hooks was introduced it was discovered by multiple teams that inline anonymous JSX functions could create big performance issues. This was particularly felt in react native development. The solution back then was to do the whole .bind(this) to your callback methods in your react classes.

Because of this (my guess) is the react team wanted to make it extremely obvious how you could use closure state as opposed to private method callbacks when they went intro hooks, without teams having to worry about taking a performance penalty with inline callbacks. It was not obvious to me (and I’m sure many others) when hooks came out that you could memoize functions before rendering.

Again, I get the redundancy point and maybe at this point it could be deprecated but I think you have to think about where the community was before hooks.

Memoization is saving things in memory, it's a tradeoff of memory for fewer function calls. It doesn't work with all possible callback functions (because they need to be pure based on their inputs and dependencies for the saved values to still make sense), and also you don't always want to spend the memory on it (some smart memory use is going to be more performant than the function calls, too much memory use is its own performance problem).

The two hooks have different names because they make different trade-offs.

In this specific case above they work the same, useCallback memoizes the instance of a function passed. useMemo memoizes the execution of the function it is passed. but both have valid separate uses.

They are identical in their effect[1]. At one point they were almost identical in their implementation. Looking around at the (much larger) current React source seems to indicate that this is still the case.

[1] https://react.dev/reference/react/useMemo#memoizing-a-functi...

Reply on news.ycombinator.com