Hone logo
Hone
Problems

Angular Change Detection Optimization Challenge

Angular's change detection mechanism automatically updates the view when the underlying data changes. However, this process can become inefficient, especially in complex applications with frequent updates, leading to performance bottlenecks. This challenge asks you to implement a component that leverages Angular's ChangeDetectionStrategy.OnPush to optimize change detection and improve performance.

Problem Description

You are tasked with creating an Angular component that displays a list of items fetched from an external API. The component should initially load the data and display it. The list should be updated when a button is clicked, fetching a new set of items from the API. The key requirement is to implement ChangeDetectionStrategy.OnPush to ensure that change detection only runs when the component's input properties change or when an event handler is triggered. This will prevent unnecessary change detection cycles and improve performance.

What needs to be achieved:

  • Create an Angular component that displays a list of items.
  • Fetch data from a mock API (provided below).
  • Implement ChangeDetectionStrategy.OnPush.
  • Update the list when a button is clicked, triggering a new API call.
  • Ensure the component only re-renders when necessary, demonstrating the benefits of OnPush.

Key Requirements:

  • The component must use ChangeDetectionStrategy.OnPush.
  • The component must display the fetched data in a clear and readable format (e.g., a simple list).
  • The component must have a button that, when clicked, fetches a new set of data from the mock API.
  • The component should handle loading states (e.g., display a loading indicator while fetching data).
  • The component should handle potential errors during API calls (e.g., display an error message).

Expected Behavior:

  • On initial load, the component should fetch and display the initial data.
  • When the button is clicked, a new API call should be made, and the list should update with the new data.
  • Change detection should only run when the input properties change (which they won't in this case) or when the button click event is triggered. This should be observable through browser developer tools (performance tab).
  • The component should gracefully handle loading and error states.

Edge Cases to Consider:

  • What happens if the API call fails? Display an appropriate error message.
  • How do you handle the initial loading state while waiting for the data?
  • Consider the performance implications of large datasets. While this is a simplified example, think about how OnPush would benefit a component displaying a very long list.

Examples

Example 1:

Input: Initial API response: [{id: 1, name: "Item 1"}, {id: 2, name: "Item 2"}]
Output: Component displays a list: "Item 1", "Item 2"
Explanation: The component initially renders the data fetched from the API.

Example 2:

Input: Button click after initial load, API response: [{id: 3, name: "Item 3"}, {id: 4, name: "Item 4"}]
Output: Component updates the list: "Item 3", "Item 4"
Explanation: The component fetches new data and updates the displayed list.  Change detection only runs because of the button click event.

Example 3: (Error Handling)

Input: Button click, API call fails.
Output: Component displays an error message: "Failed to fetch data."
Explanation: The component handles the error and informs the user.

Constraints

  • Angular Version: Angular 14 or higher.
  • Data Fetching: Use HttpClient to simulate API calls.
  • Mock API: Use the following mock API endpoint: https://jsonplaceholder.typicode.com/todos (This API returns a list of todo items). You can modify the endpoint to return a different dataset if desired.
  • Performance: The component should demonstrate a noticeable performance improvement when using ChangeDetectionStrategy.OnPush compared to the default change detection strategy (observe). Use the browser's performance tools to verify this.
  • Component Size: Keep the component relatively simple and focused on demonstrating change detection optimization.

Notes

  • Remember to import ChangeDetectionStrategy from @angular/core.
  • Apply ChangeDetectionStrategy.OnPush in the component's ChangeDetectionOptions decorator.
  • The button click event is a good trigger for change detection when using OnPush.
  • Consider using RxJS Observables to handle the asynchronous API calls.
  • Use trackBy in the *ngFor directive to further optimize rendering performance, especially with large datasets. While not strictly required, it's a good practice.
  • Focus on understanding why OnPush improves performance, not just how to implement it. Use the browser's developer tools to observe change detection cycles.
Loading editor...
typescript