From 0b17574ee674f65ac1c5d61417e0bfcd6682af5a Mon Sep 17 00:00:00 2001 From: Himanshu Date: Sat, 30 Sep 2023 22:30:25 +0530 Subject: [PATCH] suspense-1 solution --- react-quiz/suspense-1_en.md | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/react-quiz/suspense-1_en.md b/react-quiz/suspense-1_en.md index 4875dcb2..f2802c1c 100644 --- a/react-quiz/suspense-1_en.md +++ b/react-quiz/suspense-1_en.md @@ -1,4 +1,28 @@ +> This solution is created by [@Himanshu](https://www.yadavhimanshu.com) ! -There is no solution yet. - -Would you like to [contribute to the solution](https://github.com/BFEdev/BFE.dev-solutions/blob/main/react-quiz/suspense-1_en.md)? [Contribute guideline](https://github.com/BFEdev/BFE.dev-solutions#how-to-contribute) +## Solution +```js +"App" +"A1" +"fallback" +"A1" +"A2" +``` +## Step by Step +1. Mouting of App Component + 1. App component will be executed and log ` "App" ` will be printed +2. Component `A` is wrapped in suspense boundary. Component `A` will be executed. + 1. The lof `"A1"` will be logged. + 2. `resource.get()` will trigger the asynchronous task. Which will suspend the rendering of `A` +3. Now `Fallback` Component Renders and log `"fallback"` +4. React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch. [Reference](https://react.dev/reference/react/Suspense#caveats). + 1. According to React documentation Component `A` will re-render + 1. It will log `A1` first then `resource.get()` called again. It will return `1` + 2. Then it will log `A2`. +```js +"App" +"A1" +"fallback" +"A1" +"A2" +``` \ No newline at end of file