AI solution for React Quiz on BFE.dev
7. Suspense 1

The code outputs the following by console.log:

App
A1
fallback
A2

Explanation:

• The ReactDOM.createRoot is used for Concurrent rendering in React. When the App component is rendered, it logs App.
• The App component contains <Suspense> component that has a child, <A> component.
• When <A> component is rendered, it logs A1, then it calls the resource.get() function which returns a Promise object, since status is pending.
• The Promise is handled by the <Suspense> component, which renders and logs <Fallback> component, it logs fallback.
• Finally, after 100ms, the Promise is resolved and <A> component is re-rendered with updated data (data = 1). It logs A2 and returns the data in a paragraph.