Skip to content

Instantly share code, notes, and snippets.


Andrew Clark acdlite

View GitHub Profile
acdlite / Dataloader.js
Last active Aug 15, 2018
Idea for Dataloader component
View Dataloader.js
// The `loader` prop is a Dataloader instance
class Dataloader extends React.Component {
state = {data: null, isLoaded: false};
componentWillMount() {
componentWillReceiveProps(nextProps) {
if ( !== || this.props.loader !== nextProps.loader) {
this.setState({isLoaded: false});
acdlite /
Last active Mar 20, 2022
Demo: Coordinating async React with non-React views

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

acdlite / prefetch.js
Last active Jun 11, 2021
Prefetching in React
View prefetch.js
function prefetch(getKey, getValue, getInitialValue, propName) {
const inFlight = new Set();
const cache = new Map();
return ChildComponent => {
return class extends React.Component {
state = {value: getInitialValue(this.props)};
componentWillReceiveProps(nextProps) {
const key = getKey(nextProps);
if (cache.has(key)) {
// Use cached value
acdlite / app.js
Last active Jul 19, 2022
Quick and dirty code splitting with React Router v4
View app.js
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
acdlite / SassMeister-input.scss
Created Aug 22, 2015
Generated by
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
.foo :global(.some-ovid-class) .bar {
color: blue;
acdlite / app.js
Last active Nov 4, 2018
Minimal router using existing React Router primitives
View app.js
const history = createHistory();
const router = createReactRouter(routes);
history.listen((location => {
router.match(location, (err, state, redirectInfo) => {
// Integrate with external state library (Redux), or render directly
<RouterComponent {...state} />;
acdlite / gist:1168dd2c3cbd8e4cb477
Last active Aug 29, 2015
Potential redux-react-router API
View gist:1168dd2c3cbd8e4cb477
function reactRouter(router) {
return (reducer, initialState) => next => {
const baseStore = next(reducer, initialState);
function storeIsInSyncWithRouter() {
//... blah blah implementation details
// Apply router middleware which intercepts TRANSITION_TO actions
const wrappedDispatch = routerMiddleware(router)()(baseStore.dispatch);
acdlite / flux.js
Last active Oct 7, 2021
A Redux-like Flux implementation in <75 lines of code
View flux.js
* Basic proof of concept.
* - Hot reloadable
* - Stateless stores
* - Stores and action creators interoperable with Redux.
import React, { Component } from 'react';
export default function dispatch(store, atom, action) {
acdlite / gist:c7eb7ac45617d9332b60
Last active Aug 29, 2015
Imagining a more functional, classless Flummox API
View gist:c7eb7ac45617d9332b60
import Flummox from 'flummox';
import { Map } from 'immutable';
// Instead of a constructor, just wrap flux creation inside a function
export default function createFlux() {
const flux = new Flummox();
// Actions are the same. Just pass an object instead of a class.
const thingActions = flux.createActions('things', {
incrementSomething(amount) {
acdlite / gist:dfbac9ed62474e1be605
Created Apr 1, 2015
Create Flummox actions from plain JavaScript objects
View gist:dfbac9ed62474e1be605
const flux = new Flux();
flux.createActions('foobar', {
foo() {
return 'bar';
bar() {
return 'baz';