reactjs - Getting error when using async function with react hooks

Question

I am getting following error when I testing hooks with async function;

Invariant Violation Objects are not valid as a React child (found: [object Promise]).

async function Test () {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/42');
  const json = await data.json();  
  const id = json.id;
  return id;
}

...

function App() {
  return (
    <div className="App">
      <h1>React Hooks Example</h1>

      <Suspense fallback={<LoadingMessage />}>
        <Test />
      </Suspense>

    </div>
  );
}

https://codesandbox.io/s/4w2yzvyro7

How can I fix this error

Answer 1

<Suspense> is supposed to be used in very specific manner. It suspends the rendering of lazy components and renders other kinds of components as is.

Test is not lazy component but async function, it returns promise object and not React element, hence Test is not a valid React component.

lazy components are aimed at rendering default imports from lazily loaded components. Basically lazy component should return a promise of an object with default property that contains valid React component.

It can be used as:

const Test = lazy(async () => {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/42');
  const json = await data.json();  
  const id = json.id;

  return { default: (props) => <div>{id}</div> };
});

...

<Suspense fallback={<LoadingMessage />}>
  <Test />
</Suspense>

Notice that due to its primary use case, lazy component can't accept parameters, if Test had props, they would be passed to a component that async function returns.