Selectors are the memoized read layer of an NgRx app. Their value is not magical rerender prevention, but reusable derived state that stays cheap as long as reducers preserve immutable input references.
Interview answer drill
Use this Angular interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
NgRx selectors beyond getting state: memoization, derived state, and Angular performanceFrontend interview answer
Interview focus
This Angular interview question tests whether you can explain NgRx selectors and memoization: derived state, composition, and immutable inputs, connect it to production trade-offs, and handle common follow-up questions.
- NgRx selectors and memoization: derived state, composition, and immutable inputs explanation without falling back to memorized docs wording
- Store and Selectors reasoning, edge cases, and production failure modes
- How you would answer the most likely Angular interview follow-up
Interview quick answer
Full interview answer
Memoized read model
Selectors are not just getters. They are the memoized read layer of an NgRx app: compose feature state into a view model once, reuse the last result while inputs are unchanged, and keep transformation logic out of components. The performance value comes from derived-state reuse, not from magical rerender prevention.
Worked example
Start with a feature selector, then compose small selectors into a final view model like filtered todos plus visible counts. If the input references stay stable, the memoized selector can reuse the last result instead of recalculating the whole projection every time.
Failure pattern
- If reducers mutate state in place, selector inputs keep the same reference and memoization expectations break.
- Selectors work best when reducers stay immutable and composition stays small.
- The goal is reusable derived state, not hiding bad state updates.
Selector level | Example | Responsibility |
|---|---|---|
Feature selector |
| Grab one feature slice from root state |
Entity/base selectors |
| Read normalized raw state |
Derived selectors |
| Transform/filter/sort domain data |
VM selector |
| Return final UI-ready shape for component/template |
TYPESCRIPT
import { createFeatureSelector, createSelector } from '@ngrx/store';
type Product = { id: string; name: string; price: number };
type SortKey = 'name-asc' | 'price-desc';
interface ProductsState {
entities: Record<string, Product>;
ids: string[];
query: string;
sort: SortKey;
loading: boolean;
error: string | null;
}
const selectProductsFeature = createFeatureSelector<ProductsState>('products');
const selectEntities = createSelector(selectProductsFeature, s => s.entities);
const selectIds = createSelector(selectProductsFeature, s => s.ids);
const selectQuery = createSelector(selectProductsFeature, s => s.query);
const selectSort = createSelector(selectProductsFeature, s => s.sort);
const selectLoading = createSelector(selectProductsFeature, s => s.loading);
const selectError = createSelector(selectProductsFeature, s => s.error);
const selectAllProducts = createSelector(selectIds, selectEntities, (ids, entities) =>
ids.map(id => entities[id])
);
const selectFilteredProducts = createSelector(selectAllProducts, selectQuery, (products, query) => {
const q = query.trim().toLowerCase();
if (!q) return products;
return products.filter(p => p.name.toLowerCase().includes(q));
});
const selectSortedProducts = createSelector(selectFilteredProducts, selectSort, (products, sort) => {
const copy = [...products];
if (sort === 'name-asc') return copy.sort((a, b) => a.name.localeCompare(b.name));
return copy.sort((a, b) => b.price - a.price);
});
export const selectProductsVm = createSelector(
selectSortedProducts,
selectLoading,
selectError,
(items, loading, error) => ({ items, loading, error, total: items.length })
);
Memoization behavior | What happens | Practical impact |
|---|---|---|
First evaluation | Projector runs and result is cached | Expected initial compute cost |
Same input selector references | Cached result returned, projector does not re-run | Avoids unnecessary CPU and re-renders |
Any input reference changes | Projector re-runs once and cache is updated | Recompute only when data actually changed |
Inputs recreated every time | Memoization is defeated | Performance degrades and UI churn increases |
TYPESCRIPT
// ❌ Pitfall: selecting whole state and rebuilding arrays/objects in component
@Component({ selector: 'app-products', template: `...` })
export class ProductsComponent {
// broad selection + local mapping each emission
readonly vm$ = this.store.select(state => state).pipe(
map(state => {
const items = Object.values(state.products.entities)
.filter(p => p.name.includes(state.products.query))
.sort((a, b) => a.name.localeCompare(b.name));
return {
items: [...items], // new object/array every time
total: items.length,
loading: state.products.loading
};
})
);
}
// ✅ Better: keep composition in selectors, component only selects VM
@Component({ selector: 'app-products', template: `...` })
export class ProductsComponent {
readonly vm$ = this.store.select(selectProductsVm);
}
Common pitfall | Why it hurts | Fix |
|---|---|---|
Selecting the whole root state in components | Any unrelated state change can trigger unnecessary recalculation | Select the narrowest feature/VM selector |
Doing filter/sort/map in components repeatedly | Logic duplication + unstable references + harder tests | Move derivation into composed selectors |
Returning brand-new objects everywhere without need | Memoization cannot help if inputs are constantly rebuilt | Preserve stable references where possible and compose selectors |
Keeping selectors too shallow (no VM selector) | Components become bloated orchestration layers | Create a single UI-focused VM selector |
Interview summary
NgRx selectors are a memoized read-model layer, not just property accessors. Compose selectors from feature state to entities to derived filtered/sorted data, then expose a final view model selector to components. This improves Angular selector performance, reduces component complexity, and keeps state logic reusable.
Similar questions
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the Angular interview questions cluster or a guided prep path.