Manisha Basra jscodelover

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

What's an Effective Engineer?

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

	const SCROLL_UP = "up";
	const SCROLL_DOWN = "down";

	const useScrollDirection = ({
	initialDirection,
	thresholdPixels,
	off
	} = {}) => {
	const [scrollDir, setScrollDir] = useState(initialDirection);

	import { useState } from 'react';

	export function useCounter(initial = 0) {
	const [count, setCount] = useState(initial);

	return [count, () => setCount(count + 1)];
	}

	import React, { Component } from 'react';
	import ReactTable, { ReactTableDefaults } from 'react-table';
	//https://github.com/tannerlinsley/react-table
	//https://react-table.js.org/
	import 'react-table/react-table.css'

	Object.assign(ReactTableDefaults, {
	defaultPageSize: 10,
	minRows: 3,
	});