From React Fiber to Async Rendering

from an application engineer perspective

🈚️ No code

📝 API not ready yet

🗣 Storytelling

React, React Native, React Fiber?? 🤔

Reconciler
(render/reconciliation)

Renderer
(commit)

props
state

vDOM

DOM (UI)

⏱Scheduling

🚀Priority

Async Rendering 😏

Computing power

Network speed

Life without version control

hotfix 😦

Life with version control

Time Slicing 🥒

Computing power

Network speed

Time slicing 🥒

// component
componentDidMount () {
  this.props.fetchData()
}

// redux
const fetchData = 
  state => state.merge({
    isFetching: true
  })


// saga
function * fetchData () {
  yield call(api.fetchData)

  // store data to redux
}

// component
render () {
  isFetching
    ? renderSpinner()
    : renderData()
}

Dependency

Loading state depends on UX

NOT how you code

// app.js
const App = () => (
  <MovieList />
  <MoviePage />
)

// moviePage.js
const MoviePage = () => (
  <MovieDetails />
  <MovieReviews />
)

<Placeholder
  delayMs={1000}
  fallback={<Spinner />}
>
  <MoviePage>
</Placeholder>

Reasonable spinner

const MoviePage = () => (
  <>
    <MovieDetails />
    <MovieReviews />
  </>
)

Wait sibling

const MoviePage = () => (
  <>
    <MovieDetails />

    <Placeholder
      delayMs={2000}
    >
      <MovieReviews />
    </Placeholder>
  </>
)

Partial render

const moviePageFetcher = createFetcher(
  () => import('./MoviePage')
)

const MoviePageWhenNeeded = () => {
  const MoviePage = moviePageFetcher.read()
  return <MoviePage {...props} />
}

// app
const App = () => (
  <MovieList />
  <MoviePageWhenNeeded />
)