Skip to content

Instantly share code, notes, and snippets.

@bvaughn
bvaughn / index.md
Last active April 19, 2024 04:34
How to use profiling in production mode for react-dom

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

@bvaughn
bvaughn / index.md
Last active April 3, 2024 07:41
Interaction tracing with React

This API was removed in React 17


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.

@bvaughn
bvaughn / index.md
Last active February 28, 2024 20:34
Chrome's copy+paste behavior and content editables

Start with this HTML:

<div>click here</div>
<div style="user-select: none;">read-only (no-select)</div>
<div contenteditable style="user-select: none;">editable (no-select)</div>
<div>release here</div>

Click at the top ("click here") and drag down and release at the bottom ("release here"). The following text will be selected:

Screenshot 2024-02-28 at 3 16 26 PM

@bvaughn
bvaughn / profiling-a-chrome-extension.md
Last active February 21, 2024 05:46
Profiling a custom Chrome extension

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 / infinite-lists-and-reflow.md
Last active December 27, 2023 18:51
Infinite lists and reflow

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

@bvaughn
bvaughn / LICENSE.md
Last active November 9, 2023 07:13
Advanced example for manually managing subscriptions in an async-safe way using hooks

The MIT License (MIT)

Copyright © <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

@bvaughn
bvaughn / record-with-chromium
Last active October 20, 2023 08:55
record-with-chromium
#!/usr/bin/env node
const { spawn } = require("child_process");
const util = require("node:util");
const exec = util.promisify(require("node:child_process").exec);
async function main() {
let { REPLAY_CHROME, RECORD_REPLAY_API_KEY } = process.env;
if (!REPLAY_CHROME || !RECORD_REPLAY_API_KEY) {
@bvaughn
bvaughn / updating-external-data-when-props-changes-using-promises.js
Last active July 20, 2023 16:00
Example for loading new external data in response to updated props
// This is an example of how to fetch external data in response to updated props,
// If you are using an async mechanism that does not support cancellation (e.g. a Promise).
class ExampleComponent extends React.Component {
_currentId = null;
state = {
externalData: null
};
@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)

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;
}