paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

gaearon

import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';

const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

// ------------
// reducers
// ------------

jquense

import { createStore } from 'redux';
import combineReducers from './combineReducers';

let Store = createStore(combineReducers({
  
  reducerA(state = 0, action, waitFor){
    if ( action.type === 'TEST'){
      waitState = waitFor(waitFor.reducerB)
      if ( waitState.reducerB === 5 )
        state = 10

brycebaril

@mafintosh asks: "Does anyone have a good code example of when to use setImmediate instead of nextTick?"

https://twitter.com/mafintosh/status/624590818125352960

The answer is "generally anywhere outside of core".

process.nextTick is barely asynchronous. Flow-wise it is asynchronous, but it will trigger before any other asynchronous events can (timers, io, etc.) and thus can starve the event loop.

In this script I show a starved event loop where I just synchronously block, use nextTick and setImmediate

ryanflorence

import React from 'react'
import assign from 'object-assign'

var styles = {}

class Autocomplete extends React.Component {

  static propTypes = {
    initialValue: React.PropTypes.any,
    onChange: React.PropTypes.func,

ryanflorence

// with static data, do filtering and sorting in the client
<Autocomplete
  initialValue="Ma"
  items={getUnitedStates()}
  getItemValue={(item) => item.name}
  shouldItemRender={(item, value) => (
    state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
  )}
  sortItems={(a, b, value) => (

joonaspaakko

// https://gist.github.com/joonaspaakko/ace1ec3455b6959dc611

#target photoshop

// If there are any documents open, run the code...
// =================================================
if ( app.documents.length > 0 ) {

    // Used later on when the layers are duplicated back to the original document.
    // ===========================================================================

ryanflorence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

isaacs

# Hello, and welcome to makefile basics.
#
# You will learn why `make` is so great, and why, despite its "weird" syntax,
# it is actually a highly expressive, efficient, and powerful way to build
# programs.
#
# Once you're done here, go to
# http://www.gnu.org/software/make/manual/make.html
# to learn SOOOO much more.

petehunt

function makeStyle(defaults, tagName) {
  tagName = tagName || 'div';
  var Style = React.createClass({
    getDefaultProps: function() {
      return assign({}, defaults);
    },

    render: function() {
      var style = assign({}, this.props);
      delete style.children;