jondlm

React introduced shallow rendering in 0.13. This is an excellent feature that I wish was included earlier in React. It aims to solve the problem of unit testing components without going through a real, or jsdom mocked, DOM. I couldn't find any info online about what lifecycle events it actually fires. So I did some testing of my own. To reproduce, put component.js and test.js into a folder and run node test.js.

TLDR; shallow rendering only invokes the following lifecycle hooks (in order):

1. getDefaultProps
2. getInitialState
3. componentWillMount stops here until re-render
4. componentWillReceiveProps
5. shouldComponentUpdate
6. componentWillUpdate

lahmatiy

// doesn't work w/o this interface creation
require('readline').createInterface({
  input: process.stdin,
  output: process.stdout
});

// stop process input
process.stdin.pause();

// read from stdin 10 times per second to check if ctrl+c pressed

domenic

function processBodyChunkwiseWithProgress(res, processChunk) {
  const dummyEventTarget = document.createElement("div"); // why isn't EventTarget constructible? :(

  const lengthComputable = res.headers.has("Content-Length");
  const total = res.headers.get("Content-Length") || 0;
  let loaded = 0;
  
  // Using http://underscorejs.org/#throttle
  const fireProgressThrottled = _.throttle(fireProgress, 50, { trailing: false });

markdalgleish

import transitions from './transitions.css';

export default () => (
  <ReactCSSTransitionGroup transitionName={transitions}>
    { ... }
  </ReactCSSTransitionGroup>
);

mjackson

/**
 * Registers the given callback to be called in the node.js callback
 * style, with error as the first argument, when the promise resolves.
 *
 * Also, returns a function that may be used to prevent the callback
 * from ever being called. Calling the returned function is synonymous
 * with saying "I no longer care about the resolution of this promise,
 * even if it fails."
 *
 * Since there is no provision in the promise spec for cancel/abort

iammerrick

import React from 'react';

const toPromise = (load) => (new Promise((resolve) => (
  load(resolve)
)));

class LazilyLoad extends React.Component {

  constructor() {
    super(...arguments);

acdlite

// 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 => {

addyosmani

Route-based chunking

Many of us building single-page apps today use JavaScript module bundling tools that trend towards a monolithic "bundle.js" file including the full app and vendor code for multiple routes. This means if a user lands on any arbitrary route they need to wait for a large bundle of JS to be fetched, parsed and executed before the application is fully rendered and interactive.

This is a little backwards, especially when apps are used under real-world network (3G) and device

jacob-beltran

class ScrollMonitor extends React.Component {
  constructor() {
    this.handleScrollStart = this.startWatching.bind( this );
    this.handleScrollEnd = debounce(
      this.stopWatching.bind( this ),
      100,
      { leading: false, trailing: true } );
  }

  componentDidMount() {

conorhastings

/* this lacks subscribe behavior or ability to dispatch from outside of component tree but that is generally not neccesary */
class State extends React.Component {
  constructor(props) {
    super(props); 
    this.state = YOUR_INITIAL_STATE;
  }
  reducer = (action, state, props) => {...newState};
  /* setState takes an object of new state as first arg or a function of props and state that returns new state 
   * which we will use here
   * we pass dispatch around and use it similarly to redux dispatch