Jiachi Liu huozhi

The Journey of SWR and Suspense

We are trying to combine the idea of SWR ("stale-while-revalidate") and React Suspense together, and this write-up covers all our findings from this journey.

Background

When React Hooks launched, people started to rely on useEffect to initiate data fetching:

function User () {

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

	#!/bin/bash
	set -euo pipefail

	input="$1"
	shift
	files_dir="$HOME/files"
	mkdir -p "$files_dir"

	# Delete old files
	rm -f "$files_dir"/*

	// This gist aims to explain how it's possible that async functions inside React
	// using createFetcher(Promise).next(key) can work.

	// A possible implementation of the new createFetcher function
	// as shown by https://twitter.com/jamiebuilds/status/969169357094842368
	// @param method, should be a function returning a Promise.
	// @returns an object with a property 'read', used to read values from the resolved 'cache'.
	const createFetcher = function(method) {
	// First create a Map for the resolved values.
	const resolved = new Map()

	const I = x => x
	const K = x => y => x
	const A = f => x => f (x)
	const T = x => f => f (x)
	const W = f => x => f (x) (x)
	const C = f => y => x => f (x) (y)
	const B = f => g => x => f (g (x))
	const S = f => g => x => f (x) (g (x))
	const S_ = f => g => x => f (g (x)) (x)
	const S2 = f => g => h => x => f (g (x)) (h (x))

	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }

	/*!
	* Copyright 2015 Google Inc. All rights reserved.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software

	let clickStream = Rx.Observable.fromEvent(document.getElementById('link'), 'click');

	clickStream
	.buffer(clickStream.debounce(250))
	.map(list => list.length)
	.filter(x => x === 2)
	.subscribe(() => {
	console.log('doubleclick');
	})