When NgRx is overkill in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

When is NgRx unnecessary for state management?

Which scenario best shows that using NgRx is more complex than needed?

A An app with a few simple components sharing a small amount of state

B A large app with many components needing to share and update complex state

C An app that requires undo/redo functionality and time-travel debugging

D An app that needs to persist state across sessions and synchronize with a backend

💡 Hint

Think about when a simple solution is better than a complex one.

NgRx adds complexity and boilerplate. For small apps with minimal shared state, simpler Angular services or signals are easier and faster.

❓ component_behavior

intermediate

Effect of using NgRx in a small Angular app

What is the most likely user experience impact of adding NgRx to a small Angular app with minimal state?

A The app size decreases significantly because NgRx reduces code duplication

B The app runs faster because NgRx optimizes all state changes automatically

C The app crashes frequently due to NgRx conflicts with Angular signals

D The app becomes slower and harder to maintain due to unnecessary complexity

💡 Hint

Consider the trade-off between complexity and performance in small apps.

NgRx introduces boilerplate and complexity that can slow development and maintenance in small apps without providing performance benefits.

📝 Syntax

advanced

Identifying unnecessary NgRx code in a simple app

Which code snippet shows an unnecessary use of NgRx for a simple counter component?

Angular

import { createAction, createReducer, on } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');

const initialState = { count: 0 };

const counterReducer = createReducer(
  initialState,
  on(increment, state => ({ count: state.count + 1 }))
);

// Component uses store.select and store.dispatch for a single counter value

A Using local component state with a simple variable and event binding

B Using Angular signals to hold and update the counter value locally

C Using NgRx store and actions for a single counter value in a small app

D Using a service with BehaviorSubject to share counter state between components

💡 Hint

Think about when NgRx is too much for simple state.

NgRx is powerful but adds boilerplate. For a simple counter, local state or signals are simpler and more efficient.

🔧 Debug

advanced

Debugging NgRx overuse in a small Angular app

What is the main problem caused by using NgRx in a small app with only a few components?

A NgRx forces all components to be lazy loaded, breaking routing

B Excessive boilerplate code making the app harder to read and maintain

C NgRx automatically causes memory leaks in small apps

D NgRx disables Angular's change detection causing UI not to update

💡 Hint

Focus on code complexity and maintainability.

NgRx adds many files and patterns that are unnecessary for small apps, increasing maintenance burden.

❓ lifecycle

expert

NgRx impact on Angular component lifecycle in small apps

How does using NgRx affect the Angular component lifecycle in a small app compared to using local state or signals?

A NgRx introduces asynchronous state updates that can delay UI rendering and complicate lifecycle hooks

B NgRx forces components to skip ngOnInit and ngOnDestroy lifecycle hooks

C NgRx makes components run lifecycle hooks twice causing performance issues

D NgRx replaces Angular lifecycle hooks with its own custom lifecycle methods

💡 Hint

Think about how NgRx updates state and triggers UI changes.

NgRx state updates are asynchronous and use observables, which can delay UI updates and require careful subscription management in lifecycle hooks.