react-18

If you aren't sure why state tearing was a hot topic a few years ago, when React's concurrent mode was first discussed, this github discussion should help: https://github.com/reactwg/react-18/discussions/69. Tanner Linsley had a great post on twitter that suggested that concurrent rendering was fundamentally at odds with fine-grained reactivity, so to better understand what he was talking about I decided to write this demo.

> it also only bales out during the DOM update phase; not during the calls to render() and then reconciliation(?) It's exactly the opposite. React splits work into two parts: the "render phase", where it loops over components and asks them to describe the UI they want (returning JSX/elements); and the "commit phase", where it has determined the changes that _need_ to happen to the DOM. The render phase is the part that can be split into many pieces. React can render a few components, see that 5ms has elapsed, and yield to the browser, then pick up where it left off and render a few more components. Or, it could render some components, pause, see a high-priority user event happen like typing into an input, and set aside the partially completed render pass to go re-render based on the input update. Then, after the input render is done,

Heh, unfortunately "update my rendering post to cover React 18" has been on my todo list for _months_ now :) As in, I literally have a todo list entry that I keep bumping back until "Next Sunday", because other stuff is higher priority. (like, trying to get Redux Toolkit 1.9 wrapped up and shipped... and also playing as much golf as possible while the weather is decent :) ) The shortest answer is that it's still effectively the same - the one major change is that React 18 will now batch _all_ updates in _any_ given event loop tick, regardless of whether those were queued up inside a React event handler or not. There's a good discussion on this in the React 18 Working Group post on "Automatic Batching": https://github.com/reactwg/react-18/discussions/21

“The page remembers the click” was the original intent [0], but the latest version of React includes a feature called selective hydration [1] which can hydrate a component synchronously in response to an event if possible (i.e. without replaying the event). Naturally React itself has to be loaded for any of that to work. [0] https://twitter.com/dan_abramov/status/1200118229697486849 [1] https://github.com/reactwg/react-18/discussions/130

"When to Insert <style> on The Client" in https://github.com/reactwg/react-18/discussions/110 describes some of the issues. Does this help?

Regarding styled-components and many similar CSS-in-JS libraries, I don't think there are any breaking changes currently with React 18, but it does seem like the writing is on the wall that React intends to not support libraries that inject styles into <style> tags, or at least has some specific rules these libraries need to follow to avoid performance problems. See this discussion: https://github.com/reactwg/react-18/discussions/110

The author of this series has done an excellent job breaking down some of key aspects of React's rendering into good explanations with some nifty illustrations. As linked in this article, folks might also be interested in my very extensive post "A (Mostly) Complete Guide to React Rendering Behavior" [0], which goes into a lot more detail on the nuances of this. I also generally recommend reading some of Dan Abramov's posts that explain how and why React works, including the "Complete Guide to `useEffect`" [1], "React as a UI Runtime" [2], and "Before You memo()" [3]. Finally, it's worth noting that some of React's batching behavior will change in React 18 to always batch renders even across event loop ticks - see the React 18 Working Group post on "Automatic Batching for Fewer Renders" [4] for details. FWIW, some of this material is bein

Vue doing this is awesome, but it isn't really a good reason to prefer it. Server side rendering with progressive enhancement is available in pretty much every major JS framework. Heck, the latest version of React can do SSR with late loading and late binding to make content load even faster. https://github.com/reactwg/react-18/discussions/37

>On each key event you have to update the screen so that appears to scroll up. But React gets in the way by batching setStates This does not sound correct. Quoting directly from the page on automated batching (https://github.com/reactwg/react-18/discussions/21): >Note: React only batches updates when it’s generally safe to do. For example, React ensures that for each user-initiated event like a click or a keypress, the DOM is fully updated before the next event. This ensures, for example, that a form that disables on submit can’t be submitted twice. If you see a problem like the one you're describing, please file an issue in the main React repo, and we'll have a look. I'm not sure how you could have experienced this behavior since we released the alpha an hour ago.

I'd say we can say Suspense for data fetching is "done" when Server Components (https://reactjs.org/blog/2020/12/21/data-fetching-with-react...) and built-in Suspense Cache (https://github.com/reactwg/react-18/discussions/25) are finalized. I would expect this to happen at some point during the 18.x release timeline, but maybe not in the initial release. However, React 18 does include a ton of work around Suspense, including: - Fixes to quirks in its existing behavior (https://github.com/reactwg/react-18/discussions/7) - startTransition API which lets you implement the "show old content while new data is loading" UX (https://github.com/reactwg/react-18/discussions/41) - A whole new server renderer that uses <Suspense> for streaming HTML and hydrating the page in independent parts (https://github.com/reactwg/react-18/discussions/37) So it'

Not exactly a tl;dr but some examples of features unlocked by it: - https://github.com/reactwg/react-18/discussions/41 - https://github.com/reactwg/react-18/discussions/37 Maybe somebody else has the energy to summarize them. :-) The concern was because the old approach was to change the behavior globally. The new approach is to make it opt-in when you use specific new features that rely on it.