React で input イベントごとにレンダリングしてると 入力が遅く感じる時がある
大きめの配列でそれぞれの処理も複雑なときにありがち

単純に要素ごとに 100ms 待機させた例

const Component = ({ items }) => {
	const [text, setText] = useState("")
	const onChange = (event) => setText(event.target.value)

	return (
		<div>
			<input value={text} onChange={onChange} />
			<p>{text}</p>
			<ul>
				{items.map((item, index) => {
					const d = Date.now()
					while (Date.now() < d + 100) { }
					return (
						<li key={index}>{item.name}</li>
					)
				})}
			</ul>
		</div>
	)
}

これで文字を打つと遅く感じる
items が変わらなければ ul の中はずっと同じなんだから useMemo でメモしておけばいい
理想的な書き方は ul の中に直接書いてこういう感じ

const Component = ({ items }) => {
	const [text, setText] = useState("")
	const onChange = (event) => setText(event.target.value)

	return (
		<div>
			<input value={text} onChange={onChange} />
			<p>{text}</p>
			<ul>
				{useMemo(() => {
					return items.map((item, index) => {
						const d = Date.now()
						while (Date.now() < d + 100) { }
						return (
							<li key={index}>{item.name}</li>
						)
					})
				}, [items])}
			</ul>
		</div>
	)
}

この場合はこれでも動くけどフックは関数の最初にまとめておきたい
フックは呼び出し順の違いや呼び出されない場合があったらダメなど特殊なルールがあるので 普通の関数みたいに自由に使うと思わぬ問題が出てきそうで それのために使うたびにここは大丈夫かみたいなことを慎重に確認とかしたくないし
でもそうなると ul の中だけが先に来てコンポーネント定義が読みづらくなる
先にフックの use だけ書いておいて JSX 中にメモしたい内容をかけるようなフックを useRef を使って自作

const useCache = () => {
	const ref = useRef()
	return (...a) => {
		const fn = a.pop()
		if (ref.current &&
			ref.current.deps.length === a.length &&
			ref.current.deps.every((e, i) => e === a[i])
		) {
			return ref.current.cache
		}
		const next = fn(...a)
		ref.current = { deps: a, cache: next }
		return next
	}
}

const Component = ({ items }) => {
	const [text, setText] = useState("")
	const onChange = (event) => setText(event.target.value)
	const cache = useCache()

	return (
		<div>
			<input value={text} onChange={onChange} />
			<p>{text}</p>
			<ul>
				{cache(items, () => {
					return items.map((item, index) => {
						const d = Date.now()
						while (Date.now() < d + 100) { }
						return (
							<li key={index}>{item.name}</li>
						)
					})
				})}
			</ul>
		</div>
	)
}

見やすくかけるようになった