acdlite

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

// The `loader` prop is a Dataloader instance
// https://github.com/facebook/dataloader
class Dataloader extends React.Component {
  state = {data: null, isLoaded: false};
  componentWillMount() {
    this.prefetchData(this.props);
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.id !== nextProps.id || this.props.loader !== nextProps.loader) {
      this.setState({isLoaded: false});

danielfttorres

// @flow
import Relay, { graphql } from 'react-relay'
import { mutationCreateUpdater} from './mutationUpdater'


const mutation = graphql`
  mutation createStoryMutation($input: CreateStoryInput!) {
    createStory(input: $input) {
      story {
        id

sibelius

How to easily type Redux Props with Flow

Add ExtractReturn helper

// https://hackernoon.com/redux-flow-type-getting-the-maximum-benefit-from-the-fewest-key-strokes-5c006c54ec87
// https://github.com/facebook/flow/issues/4002
// eslint-disable-next-line no-unused-vars
type _ExtractReturn<B, F: (...args: any[]) => B> = B;
export type ExtractReturn = _ExtractReturn&lt;*, F&gt;;

mike-marcacci

// @flow

import React, { Component } from "react";
import PropTypes from "prop-types";
import App from "./components/App";

type Props = {
  environment: *,
  queryTracker?: *
};

jordanmkoncz

#

wbyoung

/* @flow */

import {
  forOwn,
  size,
  get,
  transform,
  noop,
} from 'lodash';

sibelius

import mongoose from 'mongoose';

import connectDatabase from '../src/common/database';

// this is needed to load all models in mongoose.models
// eslint-disable-next-line
import * as M from '../src/models';

const removeCascade = async (modelName: string, _id: string) => {
  const modelNames = Object.keys(mongoose.models);

jasonLaster

Time Travel Debugging

Time Travel refers to the ability to record a tab and later replay it ([WebReplay][wrr]). The technology is useful for local development, where you might want to:

• pause and step forwards or backwards
• pause and rewind to a prior state
• rewind to the time a console message was logged
• rewind to the time an element had a certain style or layout
• rewind to the time a network asset loaded

LFSCamargo

import * as  React from 'react'
import { Animated, Easing, StatusBar, MaskedViewIOS, View, ViewStyle } from 'react-native'
import icons from '../../icons'
import lightTheme from '../../config/theme'

interface Props {
  bootstraped: boolean
}

const AnimatedGate: React.FunctionComponent<Props> = (props) => {