Code Examples #58
Replies: 5 comments 16 replies
-
Not sure if this is the most appropriate place to ask this - we can repost to another thread later on if needed. I've played with this simple Suspense demo and I couldn't get rid of "cascading spinners" - are rules regarding that written down anywhere? I mean - what are preconditions for inner Suspense to show its placeholder when the outer Suspene resolves? |
Beta Was this translation helpful? Give feedback.
-
i collected some use cases: https://twitter.com/0xca0a/status/1402558011357470720 they mostly contain codesandboxes, too. i know this canvas stuff isn't relevant for frontend dev but these use cases are for sure and they're all a little out of the box, not always concerned with loading and spinners but also orchestrating async behaviour (if this is done, do that). |
Beta Was this translation helpful? Give feedback.
-
New SSRThis server rendering demo shows what's unlocked by the new SSR Suspense architecture (#37), including Streaming HTML rendering and Selective Hydration. Notably, it shows https://codesandbox.io/s/festive-star-9hfqt?file=/src/App.js Keep in mind it doesn't have a real data fetching integration yet so those parts are faked out. |
Beta Was this translation helpful? Give feedback.
-
Suspense for Data Fetching (Cache + libraries like React Fetch)This still has open questions and likely won't be a part of 18.0.0 (#49). But I wanted to link to these so that you can see a more realistic example of how it's supposed to look in the code. (Our early examples like the one you linked in the post don't reflect that!) This example uses This example further builds on it and shows how an (unstable) Finally, https://github.com/reactjs/server-components-demo shows the preferred data fetching strategy, where |
Beta Was this translation helpful? Give feedback.
-
startTransitionWe're planning to add more demos/examples but I'll just to link to a few I already saw. Fractal demoThis demo is pretty cool: https://react-fractals-git-react-18-swizec.vercel.app/. (source code) See the blog post. React is not the best tool to render a fractal (you're probably better off with using WebGL!) but this demo does show a few cool things. In the source, updates to the slider are "urgent" while updates to the graph are marked as transitions. Increase the tree depth (left slider) and then drag the "lean tree" slider left and right. You'll notice the input is lagging a lot because it's blocked by the fractal rendering. Now tick "use startTransition" checkbox. Notice how you dragging the slider is now (more or less) fluid even though the fractal is just as slow to re-render! This is the key feature For extra effect, tick the "make each square block the thread for 0.1ms" box. This activates code that artificially slows down each square in the fractal. This shows a unique capability that libraries that claim to be "faster" than React might have difficulties replicating. If each square is updated, and each square takes 0.1ms, there is simply no way for a UI library to speed it up. It all comes down to whether all rendering is urgent, or if it's possible to split it up (like React does with transitions). You'll notice that if you tick "use |
Beta Was this translation helpful? Give feedback.
-
I think it would be really useful to have the list of features in one place with code examples as it's hard to find them amid all the discussions and @gaearon has posted some really cool ones. For example this is a great code example/demo of using
<Suspense>
including using a nested<Suspense>
.Suspense
https://codesandbox.io/s/wispy-haze-q62vr?file=/src/index.js
Beta Was this translation helpful? Give feedback.
All reactions