Brian Vaughn bvaughn

## InfiniteLoader.example.js
/** @flow */
import React, { Component } from 'react'
import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
import Immutable from 'immutable'
import InfiniteLoader from './InfiniteLoader'
import FlexTable from '../FlexTable/FlexTable'
import FlexColumn from '../FlexTable/FlexColumn'

function noop () {}

## Transition.jsx
import now from 'performance-now';
import raf from 'raf';
import { Component, PropTypes } from 'react';

export default class Transition extends Component {
  static propTypes = {
    active: PropTypes.bool.isRequired,
    children: PropTypes.func.isRequired,
    duration: PropTypes.number.isRequired,
    fromValue: PropTypes.number.isRequired,

## react-lifecycle-cheatsheet.md

      
              1 file
            
          
              51 forks
            
          
              9 comments
            
          
              213 stars
            
          
                bvaughn
                / react-lifecycle-cheatsheet.md
            
            
              Last active
              March 2, 2023 13:29
            
              
                React lifecycle cheatsheet
              
          
    React lifecycle cheatsheet


Method
Side effects¹
State updates²
Example uses


Mounting


componentWillMount

✓
Constructor equivalent for createClass 


render


Create and return element(s)


componentDidMount
✓
✓
DOM manipulations, network requests, etc.


Updating


componentWillReceiveProps

✓
Update state based on changed props


## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>js-search indexing</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## why-is-react-devtools-showing-a-development-build-icon.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              2 stars
            
          
                bvaughn
                / why-is-react-devtools-showing-a-development-build-icon.md
            
            
              Last active
              March 28, 2020 03:26
            
              
                Find out why React DevTools is showing the dev-build icon
              
          
    Ever wonder why a particular website is showing a development build icon for React DevTools? Here's how you can find out!
First copy/paste this well-annotated DevTools build-type-checker function into your browser console so you can run it.
Next, execute the following line in your developer console:
console.log(__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers);
If React is present on the page, you'll see something like:

  
## babel-glamor-css-label-transform.js
const hasLabelProperty = path =>
  path.node.value.expression.properties.find(
    property => property.key.name === "label"
  );

const isGlamorAttribute = path => {
  return path.node.name.name === "css";
};

const getParentComponentName = path => {

## example-Grid-cellKeyGetter.js
function createLittleKeyPool() {
  const availableKeys = [];
  const inUseKeys = [];

  let previousCycle = null;
  let keyCounter = 0;

  function releaseKeys({ startIndex, stopIndex }) {
    if (previousCycle !== null) {
      const {

## CodeEditor.js
/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * @emails react-core
 */

'use strict';

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

## eager-prefetching-async-data-example.js
// This is an advanced example! It is not intended for use in application code.
// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
// Most components should just initiate async requests in componentDidMount.

class ExampleComponent extends React.Component {
  _hasUnmounted = false;

  state = {
    externalData: null,
  };

## updating-external-data-when-props-changes-using-promises.js
// This is an example of how to fetch external data in response to updated props,
// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

class ExampleComponent extends React.Component {
  _currentId = null;

  state = {
    externalData: null
  };
	/** @flow */
	import React, { Component } from 'react'
	import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
	import Immutable from 'immutable'
	import InfiniteLoader from './InfiniteLoader'
	import FlexTable from '../FlexTable/FlexTable'
	import FlexColumn from '../FlexTable/FlexColumn'

	function noop () {}
	import now from 'performance-now';
	import raf from 'raf';
	import { Component, PropTypes } from 'react';

	export default class Transition extends Component {
	static propTypes = {
	active: PropTypes.bool.isRequired,
	children: PropTypes.func.isRequired,
	duration: PropTypes.number.isRequired,
	fromValue: PropTypes.number.isRequired,
Method	Side effects¹	State updates²	Example uses
Mounting
`componentWillMount`		✓	Constructor equivalent for `createClass`
`render`			Create and return element(s)
`componentDidMount`	✓	✓	DOM manipulations, network requests, etc.
Updating
`componentWillReceiveProps`		✓	Update `state` based on changed `props`
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>js-search indexing</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	const hasLabelProperty = path =>
	path.node.value.expression.properties.find(
	property => property.key.name === "label"
	);

	const isGlamorAttribute = path => {
	return path.node.name.name === "css";
	};

	const getParentComponentName = path => {
	function createLittleKeyPool() {
	const availableKeys = [];
	const inUseKeys = [];

	let previousCycle = null;
	let keyCounter = 0;

	function releaseKeys({ startIndex, stopIndex }) {
	if (previousCycle !== null) {
	const {
	/**
	* Copyright (c) 2013-present, Facebook, Inc.
	*
	* @emails react-core
	*/

	'use strict';

	import React, {Component} from 'react';
	import ReactDOM from 'react-dom';
	// This is an advanced example! It is not intended for use in application code.
	// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
	// Most components should just initiate async requests in componentDidMount.

	class ExampleComponent extends React.Component {
	_hasUnmounted = false;

	state = {
	externalData: null,
	};
	// This is an example of how to fetch external data in response to updated props,
	// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

	class ExampleComponent extends React.Component {
	_currentId = null;

	state = {
	externalData: null
	};