Skip to content

Instantly share code, notes, and snippets.

@bvaughn
bvaughn / multi-version-browser-extension.md
Created May 7, 2021 15:41
Multi-version browser extension proposal

Multi-version browser extension

This gist describes a challenge I've encountered while maintaining the React DevTools browser extension, and briefly explores one possible way to address that challenge. I would be happy to talk more in depth about this topic with anyone from Chrome/Firefox/Edge who would be interested in exploring.

The problem

The React DevTools browser extension supports all versions of react-dom released after 16.0.0-alpha (2017). We do this because developers often switch between projects built with different versions of React, and installing/enabling multiple versions of the extensions would be cumbersome.

This has a cost though: It adds a lot of complexity to the extension.

The implementation details of a library change frequently. Sometimes they change in a [straightforward way](https://github.com/facebook/react/blob/57768ef90bdb0110c7b9266185a8f6446934b331/packages/react-devtools-shared/src

@bvaughn
bvaughn / devtools-bridge-protocol.md
Last active October 13, 2022 18:34
React DevTools: Unsupported backend version

Unsupported DevTools backend version

This page contains instructions for updating a local React DevTools application to match a version embedded in a renderer such as React Native. Instructions below cover NPM, Flipper, and React Native Debugger. If you use React DevTools in a different way, please let us know.

If you are viewing this page, you have likely seen one of the dialogs below:

Dialog displaying downgrade instructions for the React DevTools frontend to connect to an older backend version

@bvaughn
bvaughn / attaching-manual-event-listeners-in-passive-effect.js
Last active July 6, 2022 23:34
Attaching manual event listeners in a passive effect
// Simplistic (probably most common) approach.
//
// This approach assumes either that:
// 1) passive effects are always run asynchronously, after paint, or
// 2) passive effects never attach handlers for bubbling events
//
// If both of the above are wrong (as can be the case) then problems might occur!
useEffect(() => {
const handleDocumentClick = (event: MouseEvent) => {
// It's possible that a "click" event rendered the component with this effect,
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @noflow
* @nolint
* @preventMunge
* @preserve-invariant-messages
@bvaughn
bvaughn / git-fork.js
Last active January 4, 2021 20:01
Utility to checkout a remote fork and branch from a GitHub PR
#!/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);
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 December 29, 2021 02:12
`useSubscription` and `useMutableSource` tearing and deopt behavior.

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.

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 November 10, 2020 13:53
Handy tip for trimming demo videos

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
@bvaughn
bvaughn / react-window-prerendering-virtual-rows.md
Created September 5, 2019 18:13
Pre-rendering virtual rows

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)