2 years ago

When you’re working on the frontend side of the things of a website, one of the most common tasks is to render lists from arrays/objects. Now, this is pretty alright but let’s suppose the list has a significant amount of items and you’re doing some complex calculation while rendering the list. In that scenario, React will unnecessarily render the lists every time the component is called even if the items of the list array haven’t been changed.

import { useMemo } from 'react'; export default function App() { const list = [{ key: 1, value: 10 }, { key: 2, value: 20 }, { key: 3, value: 30 }]; const renderedList = useMemo(() => ( list.map(({ key, value }) => ( {value} ))), [list]); return ( {renderedList}

The useMemo() hook would return a https://en.wikipedia.org/wiki/Memoization value of this rendered list.