Why Selectors for derived state in Angular? - Purpose & Use Cases

The Big Idea

Discover how to keep your app's data fresh and consistent without rewriting the same code again and again!

The Scenario

Imagine you have a big list of user data and you want to show only the active users in your app. You try to filter this list manually every time the data changes.

The Problem

Manually filtering data everywhere is slow and messy. You might forget to update all places, causing bugs and inconsistent views. It's like rewriting the same recipe over and over, risking mistakes.

The Solution

Selectors let you define one place to compute this filtered list. Angular automatically updates the filtered data whenever the original data changes, keeping your app fast and consistent.

Before vs After

✗ Before

const activeUsers = users.filter(u => u.active); // repeated in many components

✓ After

const selectActiveUsers = createSelector(selectUsers, users => users.filter(u => u.active));

What It Enables

You get a single source of truth for derived data that updates automatically and efficiently across your app.

Real Life Example

In a shopping app, showing only items in stock without rewriting filtering logic in every component.

Key Takeaways

Manual filtering is repetitive and error-prone.

Selectors centralize derived data logic.

Angular updates derived state automatically and efficiently.