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

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

function createHOC(SomeComponent) {
  class WrapperClass extends React.Component {
    render() {
      return <SomeComponent {...this.props} ref={this.props.forwardedRef} />;
    }
  }

  return Ref.forward((props, ref) => (
    <WrapperClass {...props} forwardedRef={ref} />
  ));

bvaughn

class Example extends React.Component {
  // Store the has-been-requested flag in state, since side-effects are tied to a particular render.
  // Since this value is managed by React, this will make sure it gets set/reset correctly.
  state = {
    sideEffectData: {
      hasBeenRequested: false,
    }
  };

  componentDidMount() {

bvaughn

I've gotten a couple of questions about how the RN sync process works, so I thought I'd write up a high level overview of the current process and some of its challenges.

Sources of truth

As far as JavaScript goes, there are a couple of things that live outside of the React Native GitHub repository that get auto-synced in:

• React (core)
• ReactNative renderer
• Other things (e.g. component types like View, Text, the Animated library, StyleSheet, etc.)

The source of truth for React core is GitHub (https://github.com/facebook/react). It gets published to NPM and React Native depends on it via an NPM dependency. e.g. the most recently release of RN (55) depends on React core 16.3.1

bvaughn

/** @license React v16.3.1
 * react-test-renderer.development.js
 *
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

bvaughn

/** @license React v16.3.1
 * react-test-renderer.production.min.js
 *
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
'use strict';(function(aa,h){"object"===typeof exports&&"undefined"!==typeof module?module.exports=h(require("react")):"function"===typeof define&&define.amd?define(["react"],h):aa.ReactTestRenderer=h(aa.React)})(this,function(aa){function h(a){for(var b=arguments.length-1,d="http://reactjs.org/docs/error-decoder.html?invariant\x3d"+a,c=0;c<b;c++)d+="\x26args[]\x3d"+encodeURIComponent(arguments[c+1]);bb(!1,"Minified React error #"+a+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",
d)}function ba(a){if(null===a||"undefined"===typeof a)return null;a=cb&&a[cb]||a["@@iterator"];return"function"===typeof a?a:null}function ca(a){a=a.type;if("function"===typeof a)return a.displayName||a.name;if("

bvaughn

import * as React from "react";
import * as rbush from "rbush";

export const SelectableContext = React.createContext();

export class SelectableGroup extends React.PureComponent {
  static defaultProps = {
    tolerance: 10
  };

bvaughn

Profiler

React 16.4 will introduce a new Profiler component (initially exported as React.unstable_Profiler) for collecting render timing information in order to measure the "cost" of rendering for both sync and async modes.

Profiler timing metrics are significantly faster than those built around the User Timing API, and as such we plan to provide a production+profiling bundle in the future. (The initial release will only log timing information in DEV mode, although the component will still render its children- without timings- in production mode.)

How is it used?

Profiler can be declared anywhere within a React tree to measure the cost of rendering that portion of the tree. For example, a Navigation component and its descendants:

bvaughn

Replacing TestUtils.mockComponent()

TestUtils.mockComponent() has been confusing to React users because it relies on Jest-specific features, and only works when Jest module mocking is enabled. Additionally, it was broken for common patterns like functional components. For these reasons we are removing it from the React TestUtils package.

If you depend on it, you can copy and paste this drop-in replacement into your project:

function mockComponent(component, mockTagName) {
  mockTagName = mockTagName || component.mockTagName || 'div';