Suspense - Deepstash

Explore the World's Best Ideas

Join today and uncover 100+ curated journeys from 50+ topics. Unlock access to our mobile app with extensive features.

Suspense

Suspense

If your component needs async data, you will either have to

  • Implement some really rigid logic for each and every component
  • Show incomplete UI
  • Re-render all your UI when the data is ready

This is where Suspense comes in. Wrapping a component in Suspense will tell React that it will have to Suspend the rendering at some point to wait for some data. But it will try to render as much of the UI as possible. As data comes, it will render more of the UI. And in the end, you will get your DOM painted faster since most of the work was done while waiting for the network.

7

12 reads

MORE IDEAS ON THIS

React hooks

React hooks

How do hooks know to return the correct state?

Unlike class components, functions don't hold state (let's not talk about ... this 😨) . But React has to save your state or the previous values of your useEffect deps somewhere. We can cheat a bit by creating...

7

24 reads

Components and the virtual DOM

Components and the virtual DOM

A component is an indivisible, reusable parts of your code. We use them to better organize our ui, implement separation of concerns and avoid code duplication. But React also likes when we use them smart.

When something changes in your app and a re-rerender is triggered, that update doesn't...

7

12 reads

React is a what?

React is a what?

React is a declarative component based UI library developed with the learn once write anywhere philosophy in mind. 

This definition suits react quite perfectly. Straight to the po...

7

33 reads

Blocking rendering

Blocking rendering

I just said that React doesn't immediately commit updates to the DOM because they are slow. Sometimes though, even in memory updates can be slow.  Traditionally, rendering is blocking. Once a render starts, it can't be stopped. This can delay a DOM update by too much making the experience choppy

7

11 reads

Bolognese with a touch of Imperative please

Bolognese with a touch of Imperative please

When you learn to code, you are though procedural programing, which is a form of imperative programing. You are thought to tell the computer step by step what to do.

This works fine for a independent, pure function which doesn't care about anything else outside it's scope. But when doing UI...

7

28 reads

Declarative code and JSX

Declarative code and JSX

When coding in a declarative style, you only need to define how you want your data to look and the computer will do it for you.

React gives us JSX and hooks for that. 

JSX brings HTML into JS. You just tell React how your UI should look, and he takes care of every 

7

14 reads

Concurrent mode to the rescue

Concurrent mode to the rescue

React 18 will support some new awesome features that will help us overcome these issues.

  1. Suspense
  2. Transitions
  3. Streaming HTML and Selective Hydration

7

18 reads

Streaming HTML and Selective Hydration

Streaming HTML and Selective Hydration

React 18 brings huge improvements to server side rendering. Now when performing SSR we have to 

  1. Wait for all the data to be fetched
  2. Wait for the server to render the whole page
  3. Display the rendered page
  4. Wait for the whol...

7

13 reads

Transitions

Here is another one. You press a button that takes you to another screen. You start fetching the data for that screen. In the meantime, a white screen or maybe a spinner. 

But why. Why did the developer made you see that other screen if it wasn't ready to be shown. Well... because they coul...

7

13 reads

CURATED FROM

CURATED BY

adi_random

Why 🤷‍♂️? Why not🦆

This explains what React is, how it works behind the scenes and its new features. Researching for this really helped me get a clearer picture of the matter in my head

More like this

React 18 on the horizon

The new update comes with support for React 18, which is starting to become stable. Some new interesting features from React 18 would be Suspense, APIs like startTransition and a new streaming API for server rendering with support for React.lazy

Don’t hide from your mistake

Don’t hide from your mistake

As soon as you find out that you have made a mistake, reach out to talk about it with your boss. 

If your boss requires an appointment, set one up right away—with some urgency. The less time you wait, the better. This will allow for a faster fix of any potential negative co...

Obtain intellectual property protections

Secure appropriate legal protections such as trademarks, copyrights, or patents to ensure that you won’t have any direct competition

These protections will give you the sole righ...

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

Supercharge your mind with one idea per day

Enter your email and spend 1 minute every day to learn something new.

Email

I agree to receive email updates