Skip to content

Latest commit

 

History

History
108 lines (71 loc) · 3.16 KB

react.md

File metadata and controls

108 lines (71 loc) · 3.16 KB
Raw

React Reference

The React docs are great for getting from zero to one.

Hooks

I found hooks somewhat counterintuitive at first, but they're very powerful once you grasp them. Refer to the Rules of Hooks. - @samwinslow

  1. Only call from the top level of a functional component
  2. Do not call outside a functional component or from plain JS (you can call from custom hooks)

useState

Uses destructured array assignment syntax

const [value, setValue] = useState(initialValue)

An updater function can be passed to the setter so that multiple updates can be called in sequence, or to merge-update the state via spreading if it's an object. The updater is a pure function which takes previous state and returns next.

// bad
setValue(value + 1)
setValue(value + 1)

// good
setValue(value => value + 1)
setValue(value => value + 1)

In general, derive data while rendering rather than storing derived values in state (e.g. filtering local data). However, if expensive filtering or join operations are to be performed and/or the component re-renders frequently, a memoized state management library might be better.

useEffect

Takes a callback function which may have (potentially global) side effects. Runs on every re-render by default.

function EffectExample() {
	const [value, setValue] = useState(initialValue)

	useEffect(() => {
		document.title = `The value is now ${value}`
	})

	return (
		<div>
			<p>{value}</p>
			<button onClick={() => setValue(value => value + 1)}>Use Effect</button>
		</div>
	)
}

The rendered value is not a special data binding that causes it to listen. It is merely a reflection of a new value rendered as a result of calling the setter.

Can return a cleanup function from the effect and declare when it should run

function ApiStatus({ service }) {
	const [isOnline, setOnline] = useState(null)

	const { id } = service
	useEffect(() => {
		const handleStatusChange(status) => {
			setOnline(status.isOnline)
		}
		SomeApi.subscribe(id, handleStatusChange)

		return () => SomeApi.unsubscribe(id, handleStatusChange)
	}, [id]) // Only run when `id` changes (sync to state)

	// rendering
}

useLayoutEffect

Same as useEffect, but runs callback synchronously during commit lifecycle phase

useMemo

Recalculates value only when dependencies change

useCallback

Updates callback function reference when dependencies change

useRef

Mutable ref used to access returned child.

  • Persists between renders
  • Default: { current: null }
  • Plain object; mutating does not trigger re-renders

Custom Hooks

Listeners and API connections can be extracted to a custom hook and reused

Examples from popular libraries:

  • React-Redux: useSelector, useDispatch
  • React-Router: useHistory, useLocation, useParams
  • useFormState

Further Reference