Today I Learned

React Optimization of lists in big components

Big or often rerendering component which displays list of elements, can be optimized by extracting the list to separate component and using React.memo.

In example below it provided 40x speed improvement. YMMV of course.

In the examples I have provided different stages and mistakes this optimization. They also help understand why are useMemo and useCallback hooks useful.

react optimalization examples