jacob-beltran

Hello Earth

jacob-beltran

import hoistStatics from 'hoist-non-react-statics';
import React from 'react';

/**
 * Allows two animation frames to complete to allow other components to update
 * and re-render before mounting and rendering an expensive `WrappedComponent`.
 */
export default function deferComponentRender(WrappedComponent) {
  class DeferredRenderWrapper extends React.Component {
    constructor(props, context) {

jacob-beltran

// How to ensure that our animation loop ends on component unount

componentDidMount() {
  this.startLoop();
}

componentWillUnmount() {
  this.stopLoop();
}

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() {

jacob-beltran

// How to propery cancel timeouts/intervals

compnentDidMount() {
 this._timeoutId = setTimeout( this.doFutureStuff, 1000 );
 this._intervalId = setInterval( this.doStuffRepeatedly, 5000 );
}
componentWillUnmount() {
 /*
    ProTip: If the operation already completed, or the value is undefinded
    these functions don't give a damn

jacob-beltran

/*
Sometimes a fallback value or object may be created in the render function
( or prop value ) to avoid undefined value errors. In these cases, it's best
to define the fallbacks as a constant external to the component instead of
creating a new literal.
/*

/* Bad */
render() {
  let thingys = [];

jacob-beltran

/*
Object literals or Array literals are functionally equivalent to calling
Object.create() or new Array(). This means that if object literals or
array literals are passed as prop values, React will consider these to be new
values for each render.

This is problematic mostly when dealing with Radium or inline styles.
*/

/* Bad */

jacob-beltran

/*
Passing an inline bound function (including ES6 arrow functions)
directly into a prop value is essentially passing a new 
function for each render of the parent component.
*/
render() {
  return (
    <div>
      <a onClick={ () => this.doSomething() }>Bad</a>
      <a onClick={ this.doSomething.bind( this ) }>Bad</a>

jacob-beltran

// Detect autoplay
// ---------------

// This script detects whether the current browser supports the
// autoplay feature for HTML5 Audio elements, and it sets the
// `AUTOPLAY` variable accordingly.

// Used in the Meteor app [PicDinner](http://picdinner.com)

jacob-beltran

/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
EasingFunctions = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t*t },
  // decelerating to zero velocity