francismarcus

Memoize

To prevent the re-creation of objects and functions on re-renders.

Move stuff out of render

Any variable declared within the scope of a component gets re-created on every render

Move as much as you can out of the render:

In computing, memoization or memoisation
is an optimization technique used primarily
to speed up computer programs by storing
the results of expensive function calls and
returning the cached result when the same
inputs occur again.
— wikipedia

	import React from 'react';

	export default function deferComponent(C: React.ComponentType) {
	return function DeferedComponent(props: any) {
	const [render, setRender] = React.useState(false);

	useIsomorphicLayoutEffect(() => {
	window.requestAnimationFrame(() => {
	window.requestAnimationFrame(() => setRender(true));
	});