Bug: useMemo with Suspense

[guaijie]

React version: 17.0.1

Steps To Reproduce

1. useing useMemo cache a function cacheFn
2. calling cacheFn require resource
3. using Suspense fetching resource

Link to code example: codesandbox

The current behavior

const UserInfo: FunctionComponent<{ id: number }> = ({ id }) => {
  const fetch = useMemo(() => suspenseFetch(fetchUser, id), [id]);
  const user: User = fetch();
  return (
    <div>
      <h1>{user.name}</h1>
    </div>
  );
};

'useMemo' is called repeatedly when when 'fetch' is called

The expected behavior

'useMemo' is called only when the dependencies changed

[vkurchatkin]

In order of Suspense to work you have to store resources externally, i.e. you can't create a resource and put it into a ref or state.

This is even more true for useMemo. Quoting the docs:

You may rely on useMemo as a performance optimization, not as a semantic guarantee

Meaning that if your code doesn't work for some reason, sticking useMemo is never a valid solution. It should only be used to make code that already works work faster.

[gaearon]

Indeed, Suspense is meant to only be backed by a cache. Component state or useMemo is not enough. See #17526 (comment) for more detailed requirements.

[guaijie]

Indeed, Suspense is meant to only be backed by a cache. Component state or useMemo is not enough. See #17526 (comment) for more detailed requirements.

It is reasonable and logical for me to do so
I don't think there's anything wrong with me doing that.
In fact, I submitted it as a bug in the hope that this writing would be implemented

[guaijie]

In order of Suspense to work you have to store resources externally, i.e. you can't create a resource and put it into a ref or state.

This is even more true for useMemo. Quoting the docs:

You may rely on useMemo as a performance optimization, not as a semantic guarantee

Meaning that if your code doesn't work for some reason, sticking useMemo is never a valid solution. It should only be used to make code that already works work faster.

I know, but it is also reasonable and logical for me to use UseMemo or UseCallback to cache resources.
That's why I brought it up as a bug, right.

[guaijie]

Indeed, Suspense is meant to only be backed by a cache. Component state or useMemo is not enough. See #17526 (comment) for more detailed requirements.

Maybe you should provide a hook so that I can store the resource in the component instead of having to store it in the parent component and pass it to the child component as a prop

[shengxingwang]

Can you provide a hook to implement the above

Indeed, Suspense is meant to only be backed by a cache. Component state or useMemo is not enough. See #17526 (comment) for more detailed requirements.

Can you provide a hook to implement the above