HeadlinesBriefing favicon HeadlinesBriefing.com

ReactJS Hook Pattern: Deriving State Without Redundant State

DEV Community •
×

React developers often store values that could be computed from other state variables. The official React docs label this anti‑pattern Avoid redundant state. By deriving values on the fly, components stay lean and avoid unnecessary updates. A simple example shows useState for first and last names, then builds fullName directly.

In the snippet, firstName and lastName are initialized once, while fullName concatenates them each render. Because fullName isn’t stored in state, React skips a state‑setter call and a re‑render when only the name parts change. This pattern reduces memory churn and aligns with functional programming principles favored in modern UI code.

Adopting derived state encourages developers to reach for useMemo or selector hooks when calculations become expensive. As libraries like Redux Toolkit push for normalized stores, the same philosophy spreads across the ecosystem. Watch for upcoming React RFCs that formalize best‑practice guidelines, potentially adding lint rules to catch redundant state automatically.