Files
react/packages/react-reconciler
Flarnie Marchan 125dd16ba0 Update user timing to record the timeout deadline with 'waiting' events (#12479)
* Update user timing to record the timeout deadline with 'waiting' events

**what is the change?:**
When we are processing work during reconciliation, we have a "timeout"
deadline to finish the work. It's a safety measure that forces things to
finish up synchronously if they are taking too long.

The "timeout" is different depending on the type of interaction which
triggered the reconciliation. We currently have a shorter "timeout" for
"interactive updates", meaning we will try to finish work faster if the
reconciliation was triggered by a click or other user interaction.

For collecting more data in our logs we want to differentiate the
'waiting for async callback...' events based on the "timeout" so I'm
adding that to the logging.

One interesting note - in one of the snapshot tests the "timeout" was
super high. Going to look into that.

**why make this change?:**
Right now we are debugging cases where an interaction triggers a
reconciliation and the "waiting for async callback...' events are too
long, getting blocked because the main thread is too busy. We are
keeping logs of these user timing events and want to filter to focus on
the reconciliation triggered by interaction.

**test plan:**
Manually tested and also updated snapshot tests.

(Flarnie will insert a screenshot)

* Improve wording of message

* ran prettier
2018-03-29 11:26:11 -07:00
..

react-reconciler

This is an experimental package for creating custom React renderers.

Its API is not as stable as that of React, React Native, or React DOM, and does not follow the common versioning scheme.

Use it at your own risk.

API

var Reconciler = require('react-reconciler');

var ReconcilerConfig = {
  // You'll need to implement some methods here.
  // See below for more information and examples.
};

var MyRenderer = Reconciler(ReconcilerConfig);

var RendererPublicAPI = {
  render(element, container, callback) {
    // Call MyRenderer.updateContainer() to schedule changes on the roots.
    // See ReactDOM, React Native, or React ART for practical examples.
  }
};

module.exports = RendererPublicAPI;

Practical Examples

If these links break please file an issue and well fix them. They intentionally link to the latest versions since the API is still evolving.

This third-party tutorial is relatively up-to-date and may be helpful.