React Week ‘19

React Week ‘19 took place July 15th to the 21st. The conference included lightning talks, masterclasses, workshops, a variety of social events, and a two-track conference on the final day. It was the first React focused conference in NYC and it was excellent. It won’t be the last. Here are some quick dives into some of the conference talks:

Solving Real-Life Problems with React Suspense

Dustin Meyers

The most exciting feature coming to React soon is suspense and react-cache. This talk walked through the mental model of both while rewriting react-cache from scratch. Here’s an overview in code:

// suspense takes care of conditionally rendering a loader until the data is fetched in List
// it does some additional things, but this is the basic use-case
<Suspense fallback={<Loader />}> <List /> </Suspense> // it relies on react-cache const data = ReactCache.createResource(async () => await fetchList()); const List = () => { const listToRender = data.read(); return ( <ul> {listToRender.map(...)} </ul> ) }

How does all this awesomeness happen? First, the rewrite of the React internals in version 16, namely the incorporation of the fiber data structure, makes this possible at all. And more precisely, the read method actually throws the promise! Suspense catches it, and will resume the render of the nested component that threw it when it resolves. You can see the thrown promise in the React source here: https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L159 This is pretty fascinating. This pattern was heavily inspired by algebraic effects and handlers. You can read more about it in Dan Abramov’s recent blog post “Algebraic Effects for the Rest of Us”.

Conditional Modules & Dynamic Bundling, A Netflix Original

Rajat Kumar

Netflix runs 100s of multivariate tests. This poses a problem: bundling all the code required for all test variations would cause an unacceptably large bundle size, and compiling a bundle for each possible combination of test during the build would also be ridiculous.

The solution: Netflix hacked together a WebPack plugin to generate module graphs, then built a "bundler as a service" on the back-end that generates bundles on the fly. With aggressive caching, this solution has worked well for them. They plan to open source at least the WebPack plugin soon.

Building React Apps with Internationalization (i18n) in Mind

Naomi Meyer

This was a great introduction to some React internationalization libraries. The most appealing of which, in my opinion, is react-i18next. This talk highlighted some interesting gotchas that one might encounter when working on i18n’ed products:

  • Text changing from left-to-right to right-to-left and how that affects the layout
  • The size differences of buttons and other UI elements depending on the language: do you test all of the languages you support?

i18n, like accessibility (a11y) is an important topic for developers to think about. It was nice to see this take center stage.

Automating Component Variation Rendering Using the Cartesian Component

Meltem Kilic

Consider the following component:

<Button type={primary | submit | error} theme={dark | light} />

There are 3 possible types, and 2 themes. That makes for 6 button variations, i.e. the cartesian product of the set of types and the set of themes. The first talk presented the idea of the cartesian component that works well when you need to render all possible combinations of props, e.g. in a design system:

<Cartesian
  Component={Button}
  type={['primary', 'submit', 'error']}
  theme={['dark', 'light']}
/>

A Case Study in Animating Data Visualization Transitions

Aucher Serr

There was lots of interesting higher level design ideas, then a case study. The biggest takeaway from the case study was in regard to finding the sweet spot for when more performance was necessary, usually leading to using requestAnimationFrame. DevTools profiling is essential. Check out the slides.

Hooked on Context: Managing External State

Drew Wyatt

This talk worked through a refactor of a Clock from class components to hooks. There were some great examples of useContext, useReducer, useCallback, and useEffect. If you’re new to hooks you’ll find the before and after refactor code to be a useful guide: https://github.com/drewwyatt/hooked-on-context

Developer Productivity

Kaleb McKelvey

The final talk fo the day was a high level talk about productivity. Fortunately, all of the tools mentioned can be found in the appendix of the slide deck on GitHub: https://github.com/avatar-kaleb/talk-dev-productivity-mdx-deck/blob/master/deck.mdx