General

• Think in terms of synchronization instead of lifecycle events.
• Share non-visual logic using custom hooks (instead of HOC or render props).

useState

useState provides a value that will persist across renders

and an API to update that value and trigger a re-render.

Functional Updates

Use whenever you set the current state based on the previous state.

const increment = () => setCount((count) => count + 1)

Lazy State Initialization

Use if the initial value for state is the result of an expensive calculation.

const [count, setCount] = React.useState(() => getExpensiveCount())

useEffect

The effect runs AFTER React updates the DOM and AFTER the browser paints those updates.

Cleanup function

Invoked right before invoking the new effect on a re-render AND right before removing the component from the DOM.

React.useEffect(() => {
	return function cleanup() { ... }
})

useLayoutEffect

The effect runs AFTER React updates the DOM and BEFORE the browser paints those updates.