Tweet

@ken_wheeler

More from @AdamRackis

Adam Rackis

@AdamRackis

23 Oct

I know I've been heavy on the Svelte hype lately. Some folks have been asking for specifics, which is pretty reasonable. So while my League Client patches, here's a thread of actual Svelte features that make me happy.

1: Uni-directional prop flow as religion is a shitty religion.

A solid component model, with props being passed downward is great. That was the huge value proposition of React. But there are times when this over-complicates matters.

We've all been there. We have some state that a child component needs to control. So what do we do? We define the state in the parent, and pass a setter, or reducer to the child, which the child then calls with the new value. We've all done this a million times.

Read 15 tweets

Adam Rackis

@AdamRackis

21 Oct

My plan for migrating micro-graphql-react to Svelte was to fork the repo, then use a rusty machete to hack away the complicated bullshit I spent months adding for Suspense support. That'd leave it 98% React agnostic.

Then swap out React, for Svelte.

It appears to work 😏 🥳 🍺

@Rich_Harris

The main challenge was ... webpack. If webpack doesn't have .mjs at the front of the extensions array, bad things happen to the writeable store, coming from

var internal = require('../internal');

(webpack hard codes undefined)

/cc @Rich_Harris - maybe add a warning?

And that's it. Now begins the real work, of migrating all the tests from React over to Svelte.

If you're by chance one of the few users of the original react version, don't worry - I'll still be supporting it.

Read 4 tweets

Adam Rackis

@AdamRackis

3 Aug

@acdlite

@acdlite Has this been elaborated anywhere? I'm trying to see what the rules are for mutating refs within a data-fetching hook. CM interrupting renders + data-fetching asynchrony makes this ... hard.

My worry is something like the following:

1/

@acdlite

@acdlite useQuery hook called, "currentQuery" ref is updated

render is interrupted

Can that same render be re-run but...with older state? That's not possible, is it? Except with useTransition, but in that case the new-state renders / old-state renders are in separate trees?

2/

@acdlite

@acdlite Ever be humanly possible for:

useQuery existing w/ data for query "A"

useQuery called with query "B"

currentQuery.current set to "B"—fetch()

useQuery re-renders w/ old query state "A"

ref set to "A"

promise for "B" resolves—wrongly thinks it's outdated bc mismatching ref

Read 6 tweets

Adam Rackis

@AdamRackis

17 Nov 19

The React team are some of the best web developers in the world. But sometimes they struggle to explain things to normal people—ie folks who have no fucking clue what "algebraic effects" are (like me!)

So with that, here's my serious attempt at explaining suspense

1/

For simplicity I'll talk in the first person, as though I were one of the devs making Suspense, and announcing it. Again, this is just to keep the messaging simple. I'm not deluded enough to think I could work on that team.

Hey, you know how when you browse to a new section in your web app, the new page's component lazily loads, since you wrapped it in React.lazy()? Well guess what: we have some new primitives that'll make that loading much smoother.

Read 20 tweets

Adam Rackis

@AdamRackis

11 Nov 19

Wait hold up React fam ✋

A route only needs to block (Suspend) on the initial data, right?

If our Route were to preload its data, and also send down a read() method that got called on every render, and threw until the FIRST data were ready, wouldn’t that be sufficient?

1/

Subsequent data updates (and, well, the initial data) would be returned from the same GraphQL hooks we’re already using, with the same incremental spinners.

But now a single initial page reveal with all needed data. And render as you fetch.

Is there a downside I’m missing?

2/

So something like

const TodoList = (props) => {
// data already prefetching

props.res.read(); //throws if init data not ready

const { loading, data } = useSameOldGraphQLQuery(...);

// and go ...

Read 10 tweets

Adam Rackis

@AdamRackis

30 Oct 19

* puts on a black robe *

* sacrifices a goat *

* lights incense *

"Dan Abramov"

"Dan Abramov"

"Dan Abramov"

Hey Dan 👋 How's London?

Anyway, I was just wondering if you could tell us React devs how preloading is supposed to work in this brave new Suspense world.

Thanks!

"preload high; read low" was the early advice, and that shit made *total* sense.

But now I'm hearing far, far more complex, and at times contradictory advice.

Especially confusing: difference between "fetch then render" & "fetch as you render" is utterly imperceptible 99.99% of the time—basically any time a component can render extremely fast, which is almost always.

Boring.

Let's talk about *real* waterfalls: network waterfalls.

Read 7 tweets

Share this page!

Adam Rackis

Try unrolling a thread yourself!

More from @AdamRackis

Adam Rackis

Adam Rackis

Adam Rackis

Adam Rackis

Adam Rackis

Adam Rackis

Did Thread Reader help you today?

Like this author's thread?