React Week 'i9

react-week-19.md

talk descriptions: https://reactweek.nyc/conference

Automating component variation rendering using the Cartesian component

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

= 6 button variations, i.e. the cartesian product of the set of types and the set of themes

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

Conditional Modules & Dynamic Bundling, A Netflix Original

• Netflix runs 100s of multivariate tests
• Problem: bundling all tests into one bundle would be insane, making a bundle for each combination of test would also be insane
• Solution: hacked together a webpack plugin to generate module graphs, then built sa "bundler as a service" on the back-end that generates bundles on the fly... works well with aggresive caching

Solving Real-Life Problems with React Suspense

This speaker went through how React suspense & cache work. Note: not the final API

// suspense takes care of conditionally rendering a loader until the data is fetched in List

<Suspense fallback={<Loader />}>
  <List />
</Suspense>

// it requires using react-cache

const data = ReactCache.createResource(async () => await fetchLists());

const List = () => {
  const listToRender = data.read();
  
  return (
    <ul>
      {listToRender.map(...)}
    </ul>
  )
}

How does all this awesomeness happen? First, the re-write of the React internals in v16, namely the incorporation of the fiber data structure, makes this possible at all. And more precisely, the read method actualkly throws the promise! You can see it in the React source here: https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L159

A Case Study in Animating Data Visualization Transitions

Lots of itneresting higher level design ideas, then a case study. Biggest takeaway was in regard to finding the sweet spot for when more performance was necessary, usually leading to requestAnimationFrame usage.

https://github.com/auchers/react-week-2019/blob/master/ReactWeek2019.pdf

Hooked on Context: Managing External State

Refactoring a Clock from a class component to using hooks, good example of useContext, useReducer, useCallback, and useEffect

Code here: https://github.com/drewwyatt/hooked-on-context

Building React Apps with Internationalization (i18n) in Mind

Great introduction to some React internationalization libraries.

Developer Productivity

Very high level talk about productivity. Most of the developer specific stuff is in the appendix here: https://github.com/avatar-kaleb/talk-dev-productivity-mdx-deck/blob/master/deck.mdx

There was another track of talks, check out the site for some overviews and there will probably be videos.