
React Suspense - selbekk
https://react.christmas/2019/5
======
ehnto
I don't know that I will ever be happy with lazy loaded UIs over a more
traditional "Deliver everything first, update later" approach. Hopefully
Suspense is a step to solving the problem.

I live in Australia, so there's a perceptible ~300ms delay for every action in
react-like loaded later UIs that aren't hosted in Australia, which is most of
the tools that I use. They feel clunky and broken, and the amount of times you
miss-click because something pops in suddenly and moves the button you wanted
down the page. I don't think it's the UI they think they've built.

I don't think it will ever be good enough to throw 20 requests and wait for
everything to update, bounce the page around and at long last be intractable.
I would rather receive a 2mb page right now, than a 200kb page that slowly
grows to a 2mb page over the course of 20 components individually loading
themselves.

~~~
badfrog
> a 2mb page right now, than a 200kb page that slowly grows to a 2mb page over
> the course of 20 components individually loading themselves.

Isn't the point that the 200kb is static code that can be served immediately,
while the rest can't? Regardless of whether the remaining 1.8mb is built on
the server or client, it still isn't available "right now"

~~~
picardo
I think what he is saying is since there is a network delay of 300ms for every
request, it's better for him to make a single request for a large file than to
have to make 10 requests for 200k files and wait 300ms * 10.

~~~
treve
If every requests adds this fixed latency, it would be much better to try and
parallelize the requests vs bundling everything.

~~~
picardo
True, but these requests cannot be made simultaneously. The code is loaded
only when the UI needs it.

~~~
treve
If the files can be combined, the requests can be made simultaneously

~~~
ehnto
You're right, and HTTP/2 was supposed to be a major boon here, but the problem
is actually that the UI itself only loads these things once they've been
rendered by the framework which is often after another component has loaded
them, and even if they can be ran in parallel the response times can still
vary, causing the UI jiggle you often see.

This isn't really a problem unique to high latency either, if you have a
patchy connection in transit or for some other reason, the UI will suffer.

~~~
badfrog
> but the problem is actually that the UI itself only loads these things once
> they've been rendered by the framework which is often after another
> component has loaded them

That just sounds like bad front end coding. A good framework used properly
would not have that issue.

------
ljoshua
So I'm not entirely clear on the advantage that Suspense has over the typical
pattern of loading data in componentDidMount, and just having a bit of logic
that checks whether your data has loaded or not and renders the spinner or the
actual contents. It's not really a hard pattern to implement, though sure, it
takes a few extra lines. Seems like the <Suspense> component just kind of
abstracts this a bit? What am I missing?

~~~
SamBam
I had the same question as you, but I think that the advantages are that (1)
the parent is in control of the spinner, but (2) the child is in control of
the data.

In most apps I've worked with, either (1) or (2) doesn't hold.

(1) The child is in control of the spinner:

    
    
        <Parent>
            <Child />
        </Parent>
    
        Child() {
            if (!data) {
                return <Spinner />
            }
            return <Data />
        }
    

(2) The parent is in control of the data

    
    
        <Parent>
            { state.data
              ? <Child data={data} />
              : <Spinner />
            }
        </Parent>
    

With Suspense, the child fetches its own data, but the parent is in control of
the spinner:

    
    
        <Parent>
            <Suspense fallback={<Spinner />}>
                <Child />
            </Suspense>
        </Parent>
    

So the Child doesn't need to know the details of how the parent app wants to
deal delays.

Suspense then seems to make it easier to parallelize the data requests, and
have a spinner at the lowest parent with a child waiting for data.

~~~
sammorrowdrums
Also on this topic, the beta React lets you treat loading of both child
components and or child data dependencies at a chosen level, bringing them in
line with Error Boundaries.

I think going all on on components is very easy to reason about. Same
direction React Router went with component based routing making it very easy
to for example have:

\- logged in user portal \- catch all errors and show a fallback UI \- lazy
load child components by routes with fallback loader UI \- use a loader
fallback potentially for data dependency too.

I mean, it's not perfect and I can see issues people are mentioning, but it
feels pretty good to develop with.

Add to this styled components and everything is so component based it's really
nice. One main paradigm for the whole front-end.

I don't think it's the best thing ever, but I've enjoyed the newer approaches
when working with them.

------
eknkc
I feel like Suspense has been in development for a decade now. I know, I
know.. They should not release it until they are comfortable about its
stability. But still, all the teasers and pushed back roadmaps are not helping
at this point.

This is because I feel like it's gonna be great for our apps and can't wait to
try it on production though.

~~~
yakshaving_jgt
The joke is in the name, isn’t it?

------
hkh28
Interesting introduction to suspense, didn't know about it. A word of caution
might be that it is still an experimental feature [0], so you should probably
not be throwing it into production just yet. But when it gets released as
stable, it could really improve a lot of sites!

[0] [https://reactjs.org/docs/concurrent-mode-
suspense.html](https://reactjs.org/docs/concurrent-mode-suspense.html)

------
GrazeMor
It's weird how the article mentions that before Suspense there was a waterfall
issue. But as far as I understand Suspense introduces the waterfall issue. If
you have nested components that need data, the data has to load serially
rather than in parallel which creates a waterfall and React devs don't seem to
know how to fix this issue.

~~~
concerned_user
There is no good way to to solve it other than just to use the appropriate
tools like react-saga or placeholder state for components.

If you try to make nested components load at the same time consequences can be
unpredictable, suspense lacks fine grained control so it is basically a
convenient shortcut, same as react state mixins were at the time.

------
cotelletta
I hate tutorials that don't explain you how something is actually implemented
in the framework, as if you don't need to know your own tools.

I'm inferring suspense is based on exceptions to interrupt unrenderable
components, but it would be nice if the author told me.

~~~
yakshaving_jgt
It’s not meant to be a quality tutorial. It’s a spammy content-marketing
campaign that this company are running. They plan to publish 288 of these in a
single month.

They’ve already been banned from posting these to a site similar to HN.

------
girvo
React Suspense, with hooks and fp-ts has given our team a massive leg up in
terms of rapidly building out our products new front ends. Being able to
combine typed functional programming with the functional-like abstractions
given to you by React nowadays makes for a very nice, very straightforward to
debug app, without bringing in dozens of dependencies to get this behaviour.

Ant Design has also been a game changer for us.

~~~
seer
How interesting! I've been wanting to use fp-ts for a while now. How did you
manage to convince your team to give it a go. It's certainly very different
than other orthodox approaches to React (or TS for that matter)?

Have you had any particular problems / downsides of using it?

And lastly have you considered ReasonML instead? That's the other thing I've
been following closely but it never feels quite ready to start working with,
for someone not well versed in FP that is.

~~~
girvo
To your first question: simply put, the easiest way was slipping in usage of
Either<L, R> for handling “successful failure” states; error handling in
Typescript is still not fine grained enough, even with async functions (maybe
even especially), so Either and Maybe/Option have been a big help.

And once you have those, you might as well have them implement the same
“interface”, and now you’re cooking with functors ;)

No joke, it was error handling in successful promise resolves that made it an
easy sell.

I adore Reason — I use it extensively myself, but as I also adore OCaml this
shouldn’t be surprising. The downside is that it’s a harder sell for a mostly
backend team; it can definitely be used to great effect today, but Typescript
for all its downsides is easier to use right now.

Speaking of downsides: the major one with fp-ts (and io-ts) is some of the
inscrutability of it’s more powerful abstractions for programmers who are not
well versed in typed functional programming. But that’s okay: just don’t use
them! You can get quite far with just the easy to understand concepts, and
introduce things like EitherT or Task/IO and similar as the team becomes more
confident with composing these data types!

------
iamleppert
This pretty much sums up why I’m making my way away from web development in
general.

~~~
lioeters
I appreciated your honest opinion. I'm way too invested to move away, but I've
often felt that things are getting overengineered, with the layers of
complexity endlessly accumulating - real progress should be making things
simpler.

That said, React Suspense looks like it's an improvement of a common pattern,
simpler to write and understand. Perhaps it's achieved by pushing the
complexity "down" into the library, instead of letting the user manage it
every time.

My hope is that one day, all the lessons from React will be incorporated into
browsers themselves, to clear the field for saner web development. Seeing how
Web Components is going though, I'm not holding my breath..

------
mesaframe
>will become a game changer when it comes to data fetching.

Every other technology ever.

------
thebradbain
This looks super cool, and I can immediately see how it'd be immediately
useful in production apps both because of potential use-cases and how
straightforward it seems to integrate. Is there anything similar in
development within Vue land, or is this intrinsically tied to the React render
model?

------
typon
What's the difference between this and using Apollo Graphql for requests?

~~~
bobobooey
Not sure what you mean...GraphQL is just the API endpoint. Using GQL or REST
wouldn't make a difference on how suspense works.

You'd still query and display your data in the same way. Suspense will just be
a wrapper around the component displaying the data.

~~~
typon
Consider this code snippet using Apollo React Client:

    
    
        const Dogs = ({ onDogSelected }) => (
          <Query query={GET_DOGS}>
            {({ loading, error, data }) => {
              if (loading) return 'Loading...';
              if (error) return `Error! ${error.message}`;
    
              return (
                <select name="dog" onChange={onDogSelected}>
                  {data.dogs.map(dog => (
                    <option key={dog.id} value={dog.breed}>
                      {dog.breed}
                    </option>
                  ))}
                </select>
              );
            }}
          </Query>
        );

~~~
bobobooey
You could still wrap this in a suspense wrapper.

------
sudhirj
Are we actually doing one domain and website per blog post now?

~~~
selbekk
react.christmas is on its third year of publishing 24 articles in 24 days
every holiday season. :)

~~~
droidist2
Yes, it's pretty cool, like an advent calendar:
[https://react.christmas](https://react.christmas)

Also several other topics following the same template:
[https://bekk.christmas](https://bekk.christmas)

I love the different color patterns.

~~~
selbekk
The patterns are created by Kjetil Golid - you can see more of his work at
[https://generated.space](https://generated.space)

