tezvyn:

Memoizing Selectors: Avoid Needless Re-renders

Source: reselect.js.orgintermediate

Memoized selectors prevent needless re-renders by caching derived data. A selector for a filtered list will only re-run its logic if the original list or filter criteria change, not on every state update.

A memoized selector acts like a cache for derived data in your application's state. It remembers its last inputs and result, preventing expensive re-calculations (like filtering large arrays) if the specific data it depends on hasn't changed. This is crucial in state management libraries like Redux to prevent components from re-rendering unnecessarily when unrelated state is updated. The main footgun is breaking the cache by creating new object or array references inside the input selectors themselves.

Read the original → reselect.js.org

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.

Memoizing Selectors: Avoid Needless Re-renders · Tezvyn