trueadm

const State = React.createState();

function MyComponent(props) {
  return (
    <State
      initialState={() => ({ counter: 0, lastProps: props, divRef: React.createRef() }) }
      deriveState={state => ({ lastProps: props }) }
      shouldUpdate={(state, nextState) => ... }
      didMount={(state, setState) => ... }
      getSnapshotBeforeUpdate={state => ... }

bvaughn

type SubscribableConfig = {
  // Maps property names of subscribable data sources (e.g. 'someObservable'),
  // To state names for subscribed values (e.g. 'someValue').
  subscribablePropertiesMap: {[subscribableProperty: string]: string},

  // Synchronously get data for a given subscribable property.
  // It is okay to return null if the subscribable does not support sync value reading.
  getDataFor: (subscribable: any, propertyName: string) => any,

  // Subscribe to a given subscribable.

bvaughn

// This is an advanced example! It is not typically required for application code.
// If you are using a library like Redux or MobX, use the container component provided by that library.
// If you are authoring such a library, use the technique shown below.

// This example shows how to safely update subscriptions in response to props changes.
// In this case, it is important to wait until `componentDidUpdate` before removing a subscription.
// In the event that a render is cancelled before being committed, this will prevent us from unsubscribing prematurely.

// We also need to be careful about how we handle events that are dispatched in between
// `getDerivedStateFromProps` and `componentDidUpdate` so that we don't put stale values into the `state`.

bvaughn

// 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
  };

bvaughn

// 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,
  };

clauderic

import React, {PureComponent} from 'react';
import {List} from 'react-virtualized';
import debounce from 'lodash/debounce';

class ScrollSpeed {
  clear = () => {
    this.lastPosition = null;
    this.delta = 0;
  };
  getScrollSpeed(scrollOffset) {

sahrens

A Better ListView for React Native

I have a proposal for some new APIs, and a first draft on an implementation (first diff: D4412469). Salient points on the new APIs:

• Two easy-to-use components: FlatList and SectionList. I have found that separating the section API out makes things a lot cleaner for both cases.

• One shared underlying implementation, VirtualizedList, which has an API similar to react-virtualized and uses getter functions to be very flexible and supports any kind of data structure such as a plain array or an immutable list.

• Naming adjustments to make it horizontal agnostic, e.g. "Item" instead of "Row".

bvaughn

React lifecycle cheatsheet

Method	Side effects1	State updates2	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

edulan

• How RV bypass browser's maximum scroll limits?
• How RV supports dynamic item widths/heights? (CellMeasurer shadow rendering and size caching)
• How to properly tune sectionSize property in a Collection component? (how it works and why the need of section grouping)
• How RV compares with native browser scrolling (show some benchmarks and graphs)?
• How RV supports scroll-to-first (chat style) use case?

Other questions from my workmates

• Does RV support flexbox layout?
• What's the data model RV uses? (No data model, just a collection length and indexes)

gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (