swyxio / swyxdotio

This is the repo for swyx's blog - Blog content is created in github issues, then posted on swyx.io as blog pages! Comment/watch to follow along my blog within GitHub
https://swyx.io
MIT License
336 stars 45 forks source link

TL;DR of Why React is Not Reactive #296

Closed swyxio closed 2 years ago

swyxio commented 2 years ago

source: devto devToUrl: "https://dev.to/swyx/tl-dr-of-why-react-is-not-reactive-p7p" devToReactions: 15 devToReadingTime: 2 devToPublishedAt: "2021-03-06T20:48:22.718Z" devToViewsCount: 565 title: TL;DR of Why React is Not Reactive published: true description: A recap of my first ever conference talk tags: React, Speaking, Summary slug: ReactRally canonical_url: https://www.swyx.io/ReactRally cover_image: https://user-images.githubusercontent.com/6764957/110220121-9f0aa500-7efe-11eb-8e7f-f2baddde1bbb.png

In 2018, I applied to React Rally with the most interesting React problem I could think of: Why do the React docs say that React is not fully Reactive?

Here's the talk that resulted:

{% youtube nyFHR0dDZo0 %}

You can also read the accepted React Rally CFP here with long form details.

It's a 30 min talk but with a lot squeezed in there, because it was my first conference talk and I wanted to look smart in front of people I admired.

TL;DR

Recently there has been some talk about the "reactivity" of React on Twitter recently, so I figured I would put up a quick TL;DR:

  1. React could be fully push-reactive - i even wrote a PoC (reactive-react) to explore this.

    I later realized this is basically the default state of things if you write any JS user interface with no scheduler.

  2. But then you run into problems with backpressure, where you need batching, and expensive renders (eventually causing the need for time slicing and other async rendering techniques).

  3. The solution is to push updates (reacting to external events) into a queue, but only pull views on demand.

    https://pbs.twimg.com/media/Ev0gpXpVoAIzGHa?format=png&name=small

    This is also known as scheduling. It's possible to implement this inside of an Rxjs-like paradigm, but it would be so finnicky that you'd basically be rebuilding push-pull reactivity inside of the scheduler anyway.

That's as short as I can make it. Let me know if this makes sense or you have better ways to put this!

P.S. I was invited back for React Rally 2020, where I presented on Growing a Meta-Language, briefly sketching out some ideas for React Single File Components.