Tony Brown anthonybrown

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
- Create React App
- Webpack 4

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.

GUIDE to install yarn, nvm (node) on macOS

last update: Dec 4, 2020

Assumptions:

macOS >= 10.14 (Mojave); tested with 10.15 (Catalina)
homebrew properly installed

This content moved here: https://exploringjs.com/impatient-js/ch_arrays.html#quickref-arrays

Web Performance

Requirements

You need to have the latest version of Node. Preferably, you're using 9.8.0, but the latest LTS should work as well.
You should have npx installed using npm install -g npx.
Install the React Developer Tools.

	import React, { Suspense, useState } from "react";
	import { unstable_createResource as createResource } from "react-cache";
	import {
	Combobox,
	ComboboxInput,
	ComboboxList,
	ComboboxOption
	} from "./Combobox2.js";

	function App({ tabIndex, navigate }) {

	class Example extends React.Component<
	Props,
	State,
	Snapshot
	> {
	static getDerivedStateFromProps(
	nextProps: Props,
	prevState: State
	): $Shape<State> \| null {
	// ...

	// http://www.dogbreedchart.com
	const dogShedding = {
	foxhound: 3,
	'basset hound': 2,
	beagle: 3,
	'bernese mountain dog': 1,
	poodle: 5,
	}

	// 🔥🔥

	// This is an advanced example! It is not typically required for application code.
	// If you are using a library like Redux or MobX, use the container component provided by that library.
	// If you are authoring such a library, use the technique shown below.

	// This example shows how to safely update subscriptions in response to props changes.
	// In this case, it is important to wait until `componentDidUpdate` before removing a subscription.
	// In the event that a render is cancelled before being committed, this will prevent us from unsubscribing prematurely.

	// We also need to be careful about how we handle events that are dispatched in between
	// `getDerivedStateFromProps` and `componentDidUpdate` so that we don't put stale values into the `state`.

	var obj = {value:3,stop:false}, //assing your value to obj.value every sec etc.
	values = [], //array to store values
	freq = 500, //frequency of check
	result = undefined; //the result of average in the end

	function checker(t){ //the function to periodically check
	checker.startTime = checker.startTime \|\| t;
	if(obj.stop){ //if you set obj.stop to true, you will terminate the check
	/*in the end calculate the result
	if you want, store the a.length somewhere else