Rakesh ra-kesh

React Performance

Notes From Steve Kinney's "React Performance" Frontend Masters Course

General

re: optimizations: "Start with a problem first, then solve it. dont go looking for problems."

"measure first before you optimize for performance. And then measure again."

Relational Databases
- Creating, Altering, Dropping Tables
  - Primary and Secondary Keys
  - Adding Relationships Between Two Tables using Foreign Key
  - UNIQUE, DEFAULT, NOT NULL constraints
- Inserting, Updating, Deleting Rows in a Table
- Fetching data with SELECT queries
  - Filtering and Sorting
  - Aggregations
Optimizations using *

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Eric Elliott's "Composing Software" Series

A collection of links to the excellent "Composing Software" series of medium stories by Eric Elliott.

Edit: I see that each post in the series now has index, previous and next links. However, they don't follow a linear flow through all the articles with some pointing back to previous posts effectively locking you in a loop.

Eric Elliott's "Master the JavaScript Interview" Series

A collection of links to the "Master the JavaScript Interview" series of medium stories by Eric Elliott.

	,Rank,Company,Industry,Address,City,State / Country,Postal Code,Country,"Revenue (in millions, USD)",Employees,Ticker,Website,CEO,Indian_cities,Department_in_india
	0,1,Walmart,General Merchandisers,702 S.W. Eighth St.,Bentonville,Arkansas,72716,U.S.,"$572,754",2300000.0,WMT,www.walmart.com,C. Douglas Mcmillon,"['Bangalore', 'Gurugram', 'Hyderabad', 'Mumbai', 'New Delhi', 'Pune']","['E-commerce', 'Technology', 'Data Analytics', 'Finance', 'Human Resources', 'Supply Chain', 'Marketing', 'Customer Service', 'Operations', 'Legal']"
	1,2,Amazon.com,Internet Services and Retailing,410 Terry Ave. N.,Seattle,Washington,98109,U.S.,"$469,822",1608000.0,AMZN,www.amazon.com,Andrew R. Jassy,"['Bangalore', 'Hyderabad', 'Chennai', 'Gurgaon']","['Technology', 'Operations', 'Customer Service', 'Business Development', 'Finance', 'Human Resources', 'Marketing']"
	2,3,State Grid,Utilities,86 Xichang'an Ave.,Beijing,China,100031,China,"$460,617",871145.0,,www.sgcc.com.cn,,[],[]
	3,4,China National Petroleum,Petroleum Refining,9 Dong

	import type { ComponentType } from "react"
	import styled from "@emotion/styled"

	const GradientBlur = styled.div`
	user-select: none;
	pointer-events: none;

	position: fixed;
	top: 0px;
	left: 0px;

	function walkDOMTree(
	root,
	whatToShow = NodeFilter.SHOW_ALL,
	{ inspect, collect, callback } = {}
	) {
	const walker = document.createTreeWalker(root, whatToShow, {
	acceptNode(node) {
	if (inspect && !inspect(node)) {
	return NodeFilter.FILTER_REJECT;
	}

	import { useReducer, useEffect } from 'react';
	import { useSwipeable, SwipeableHandlers, EventData } from 'react-swipeable';

	function previous(length: number, current: number) {
	return (current - 1 + length) % length;
	}

	function next(length: number, current: number) {
	return (current + 1) % length;
	}

	// Returns an array of dates between the two dates
	function getDates (startDate, endDate) {
	const dates = []
	let currentDate = startDate
	const addDays = function (days) {
	const date = new Date(this.valueOf())
	date.setDate(date.getDate() + days)
	return date
	}
	while (currentDate <= endDate) {