Skip to content

Instantly share code, notes, and snippets.

Avatar

Brian Vaughn bvaughn

View GitHub Profile
@bvaughn
bvaughn / git-fork.js
Last active Jan 4, 2021
Utility to checkout a remote fork and branch from a GitHub PR
View git-fork.js
#!/usr/bin/env node
'use strict';
const { exec, execSync } = require('child_process');
const args = process.argv[0] === 'node'
? process.argv.slice(1)
: process.argv.slice(2);
View setFocusIfFocusable.js
function setFocusIfFocusable(node) {
if (node.nodeType !== Node.ELEMENT_NODE) {
// Text and comment nodes aren't focusable.
return false;
}
if (node.disabled === true) {
// Disabled elements can't be focused.
return false;
}
@bvaughn
bvaughn / useSubscription-and-useMutableSource.md
Last active Feb 8, 2021
`useSubscription` and `useMutableSource` tearing and deopt behavior.
View useSubscription-and-useMutableSource.md

useSubscription and useMutableSource1 tearing and deopt behavior.

Mounting a new tree

The tree below represents a React application mounting. During mount, two components read from an external, mutable source. The first one (List) reads version 1 of that data and the second one (Item) reads version 2.

Deopt

useSubscription (legacy mode)

N/A.

View try-new-react-profiler.md

How to try the new React Profiler

Before the holiday break, I was experimenting with a new profiler UI that may eventually make its way into a released version of the React DevTools. In the meanwhile, for anyone who is curious, here's how you can try this new profiler for yourself!

Building React

To start, you'll need an updated version of React that logs the new performance marks used by this profiler.

To do this, you'll need to check out PR 17772 and build it from source: yarn install && yarn build --type=NODE. (In the future I may publish an experimental release to NPM to simplify this step.)

Running the Profiler

@bvaughn
bvaughn / trimming–demo-videos.md
Last active Nov 10, 2020
Handy tip for trimming demo videos
View trimming–demo-videos.md

Handy tip for trimming demo videos

Thought I'd document the process I used for trimming down my React conf demo videos in case it might be useful to someone else in the future.

Let's say I have a 40 second video named original-video.mp4, and I want to only keep the following sections (in seconds): 1-8, 10-11, 20-33

I could create 3 chunks using ffmpeg like so:

ffmpeg -i original-video.mp4 -ss 1 -t 7 piece-a.mp4 -ss 10 -t 1 piece-b.mp4 -ss 20 -t 33 piece-c.mp4
View react-window-prerendering-virtual-rows.md

Pre-rendering virtual rows

Example list with ten total rows and a viewport large enough to display two rows.

Legend

█ - Visible row ▓ - Hidden/display-locked row ░ - Empty space (nothing rendered here)

View profiling-data.v2.json
{
"version": 2,
"profilingSummary": {
"commitDurations": [
2.555000042775646,
0.0450000079581514,
0.054999967687763274,
2.4800000683171675,
0.03999999898951501,
0.0350000336766243,
@bvaughn
bvaughn / profiling-a-chrome-extension.md
Last active May 7, 2020
Profiling a custom Chrome extension
View profiling-a-chrome-extension.md

Chrome's profiler ("Performance tab) is very useful for measuring JavaScript performance, but what if you want to measure the performance of a custom extension?

For example, what if I would like to profile the following interaction:


The interaction we want to 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 Dec 30, 2020
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(
() => ({