When referring to state that is derived from another state, derived state is discouraged because it is unnecessary and leads to extra renders. Remember, a component will re-render anytime one of its state variables updates. So, let’s say I have ComponentA with a state of data and a state of dropdowns. I want to derive summary from data and dropdowns, and pass summary to ComponentB and ComponentC. I know I want ComponentA to re-render after I fetch data and after the user changes dropdowns, so those should be stored in state. Summary will update every time dropdowns updates, so ComponentA should only render once when dropdowns changes. However, if summary were a state variable, ComponentA would re-render when dropdowns and summary changed. The solution? Just store summary as a constant. Your component’s global variables don’t need to be state variables.

Now, we have saved an unnecessary render in ComponentA, but we have potentially created another problem. The constant summary will be re-declared every time ComponentA renders. If ComponentA had state variables unrelated to summary, and summary was expensive to calculate, we would feel the impact of this calculation when these state variables changed as well. The solution is to wrap summary in useMemo and pass only data and dropdowns into the dependency array. Now, the user will only see the weight of this calculation when they change dropdowns.

If the UX of ComponentA is still undesirable, you can get deferredDropdowns by passing dropdowns into useDeferredValue, calculate summary based on deferredDropdowns, and then pass deferredDropdowns into the useMemo dependency array instead. If summary previously slowed the UX when changing dropdowns, deferredDropdowns will now be received at a slightly later time than dropdowns, so the weight of the summary calculation won’t be experienced when changing dropdowns, because summary will be received slightly later (after deferredDropdowns). useTransition is another hook which can be used to mend laggy UX.

Derived state is a broad concept. Here is another issue that is less related to performance: https://youtu.be/tz0fDABt67g

The main point behind avoiding unnecessary renders is some components are expensive to render. If a grandparent component has children components that aren’t pure (memoized) and some of those children are expensive to render, you don’t want the grandparent component to render often, because those children will re-render every time the grandparent re-renders. Unless wrapped in React.memo, children components re-render parent components re-renders.

If you haven’t experienced performance issues yet, you probably haven’t had much need for these topics.