Matt babsonmatt

## render-props.jsx
const SomeScreen = () => (
  <div>
    <Blah />
    <Categories
      render={categories => (
        <Expenses
          render={expenses => (
            <div>
              {groupExpensesByCategory(categories, expenses).map(category => (
                <RandomScreen {...category} />

## coordinating-async-react.md

      
              1 file
            
          
              22 forks
            
          
              9 comments
            
          
              150 stars
            
          
                acdlite
                / coordinating-async-react.md
            
            
              Last active
              March 20, 2022 12:27
            
              
                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?

  
## StyledButton.js
('use strict');

import React from 'react';
import glamorous from 'glamorous';

const colors = {
    success: '#29A88E',
    danger: '#C65F4A',
    primary: '#6DCFD3',
    info: '#FFD035',

## magic_flash_resolver.js
/**
 * Created at 03/17/2017
 * Developed by Jorge Cuesta <jorge.s.cuesta@gmail.com>
 * Developed by Jeffrey Soriano <jeffreysoriano5@gmail.com>
 */

// ### Use cases

/*
 keys & data -> result

## MainActivity.java
/*
 * Copyright 2016 Google Inc.
 *
 * 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

## general-purpose-reducers.js
/**
 * This gist was inspired by the video course titled "Building React Applications with Idiomatic Redux"
 * available on Egghead.io by the creator of Redux, Dan Abramov.
 *
 * The purpose of this gist is to demonstrate general purpose reducers that can be used via Redux's combineReducers
 * to compose more complex reducers and therefore maximize code reuse.
 *
 * Feedback is more than welcome!
 *
 * @author Christoffer Niska <christofferniska@gmail.com>

## arrayBatchedActionsEnhancer.js
// copy-pasta'd from isarray
var toString = {}.toString;

const isArray = Array.isArray || function (arr) {
  return toString.call(arr) == '[object Array]';
};


export function batchedSubscribe() {
  let currentListeners = [];

## index.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AWS IoT Pub/Sub Demo</title>
</head>
<body>
    <h1>AWS IoT Pub/Sub Demo</h1>
    <form>
        <button type="button" id="connect">connect!</button>

## WebViewAutoHeight.js
/*
        DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2016 Esa-Matti Suuronen <esa-matti@suuronen.org>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

## Redirector.js
import { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { transitionTo } from 'redux-react-router'

const NEXT_URL = 'REDIRECTOR(NEXT_URL)'
const CLEAR_NEXT_URL = 'REDIRECTOR(CLEAR_NEXT_URL)'

export const transitionNext = url => ({ type: NEXT_URL, payload: url })
export const clearNextUrl = () => ({ type: CLEAR_NEXT_URL })
	const SomeScreen = () => (
	<div>
	<Blah />
	<Categories
	render={categories => (
	<Expenses
	render={expenses => (
	<div>
	{groupExpensesByCategory(categories, expenses).map(category => (
	<RandomScreen {...category} />
	('use strict');

	import React from 'react';
	import glamorous from 'glamorous';

	const colors = {
	success: '#29A88E',
	danger: '#C65F4A',
	primary: '#6DCFD3',
	info: '#FFD035',
	/**
	* Created at 03/17/2017
	* Developed by Jorge Cuesta <jorge.s.cuesta@gmail.com>
	* Developed by Jeffrey Soriano <jeffreysoriano5@gmail.com>
	*/

	// ### Use cases

	/*
	keys & data -> result
	/*
	* Copyright 2016 Google Inc.
	*
	* 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
	/**
	* This gist was inspired by the video course titled "Building React Applications with Idiomatic Redux"
	* available on Egghead.io by the creator of Redux, Dan Abramov.
	*
	* The purpose of this gist is to demonstrate general purpose reducers that can be used via Redux's combineReducers
	* to compose more complex reducers and therefore maximize code reuse.
	*
	* Feedback is more than welcome!
	*
	* @author Christoffer Niska <christofferniska@gmail.com>
	// copy-pasta'd from isarray
	var toString = {}.toString;

	const isArray = Array.isArray \|\| function (arr) {
	return toString.call(arr) == '[object Array]';
	};


	export function batchedSubscribe() {
	let currentListeners = [];
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>AWS IoT Pub/Sub Demo</title>
	</head>
	<body>
	<h1>AWS IoT Pub/Sub Demo</h1>
	<form>
	<button type="button" id="connect">connect!</button>
	/*
	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2016 Esa-Matti Suuronen <esa-matti@suuronen.org>

	Everyone is permitted to copy and distribute verbatim or modified
	copies of this license document, and changing it is allowed as long
	as the name is changed.
	import { Component, PropTypes } from 'react'
	import { connect } from 'react-redux'
	import { transitionTo } from 'redux-react-router'

	const NEXT_URL = 'REDIRECTOR(NEXT_URL)'
	const CLEAR_NEXT_URL = 'REDIRECTOR(CLEAR_NEXT_URL)'

	export const transitionNext = url => ({ type: NEXT_URL, payload: url })
	export const clearNextUrl = () => ({ type: CLEAR_NEXT_URL })