Skip to content

Instantly share code, notes, and snippets.

Brian Vaughn bvaughn

View GitHub Profile
@bvaughn
bvaughn / profile-data.json
Created Apr 1, 2019
Sample React DevTools profiling data export
View profile-data.json
{
"version": 1,
"profilingSummary": {
"commitDurations": [
8.130000089295208,
2.7099999133497477,
0.40499994065612555,
0.3299998352304101,
0.3400000277906656,
0.33000006806105375,
@bvaughn
bvaughn / example.jsx
Last active Apr 3, 2019
Advanced example for manually managing subscriptions in an async-safe way using hooks
View example.jsx
import React, { useMemo } from "react";
import useSubscription from "./useSubscription";
// In this example, "source" is an event dispatcher (e.g. an HTMLInputElement)
// but it could be anything that emits an event and has a readable current value.
function Example({ source }) {
// In order to avoid removing and re-adding subscriptions each time this hook is called,
// the parameters passed to this hook should be memoized.
const subscription = useMemo(
() => ({
@bvaughn
bvaughn / infinite-lists-and-reflow.md
Last active Mar 8, 2019
Infinite lists and reflow
View infinite-lists-and-reflow.md

Infinite lists and reflow

In my experience, infinite lists use two basic layout strategies. The first uses absolute positioning to control where visible items are rendered. The second uses relative positioning (with top/left padding to offset for unrendered items).

In both cases, the list abstraction caches some metadata about the size of items once they have been rendered– so that it knows where to position the items that come after them.

Both of these strategies need to handle reflow. For example, changing the width of a list often affects the height of its itesm. Generally speaking, only the "window" of rendered (visible) items are remeasured in this case (because it would be too slow to rerender and remeasure all of the items before). But once a user scrolls backwards (up/left)– the list needs to account for the reflowed sizes. If it didn't, items would appear to jump up or down (depending on the delta between the previous, cached sizes and the new/reflowed sizes).

How the list deals with new sizes

View ReactNative-useEffect-repro.js
import React, {useEffect, useRef, useState} from 'react';
import {Animated, Text} from 'react-native';
// Begin https://unpkg.com/react-native-animation-hooks@1.0.1/build/AnimationHooks.js
export const useAnimatedValue = initialValue => {
const ref = useRef(new Animated.Value(initialValue));
return ref.current;
};
const getInitialValue = config => {
if (typeof config.initialValue !== 'undefined') return config.initialValue;
@bvaughn
bvaughn / 000.md
Last active Nov 7, 2018
react-window itemData -> data props behavior
View 000.md

Related discussion on bvaughn/react-window/issues/85.

Overview

The specific API feature this Gist is exploring is the itemData prop. This prop provides a way for a component to pass "contextual" list data to an item renderer without adding the overhead of using context. In most cases, a single value is passed (e.g. an array/list) like so:

function ComponentThatRendersAListOfItems({ itemsArray, ...rest }) {
  render() {
    // Pass items array to the item renderer component as itemData:
    return (
View App.js
import React, { Component, Fragment, Suspense } from 'react';
import read from './Resource';
// Wait long enough for DevTools to see
const wait = (ms = 1) => {
const startTime = performance.now();
while (performance.now() - startTime < ms) {
// ...
}
};
View test-error-boundaries.js
const jestDiff = require("jest-diff");
describe("error boundaries", () => {
let BrokenRender;
let DidCatchErrorBoundary;
let GetDerivedErrorBoundary;
let React;
let ReactNoop;
let ReactFeatureFlags;
let ReactTestRenderer;
@bvaughn
bvaughn / index.md
Last active Apr 11, 2019
How to use profiling in production mode for react-dom
View index.md
@bvaughn
bvaughn / index.md
Last active Apr 16, 2019
Interaction tracing with React
View index.md

Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.

This Gist provides some high-level docum

@bvaughn
bvaughn / react-dom.development.cjs.diff
Last active Aug 31, 2018
React PR #13509 bundle diffs
View react-dom.development.cjs.diff
1c1
< /** @license React v16.4.2
---
> /** @license React v16.4.3-alpha.0
18d17
< var invariant = require('fbjs/lib/invariant');
20,21d18
< var warning = require('fbjs/lib/warning');
< var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
23d19
You can’t perform that action at this time.