Matej Mijić

The Developer’s Guide to React Native Paid Subscriptions with react-native-iap library.

Implement In-App Purchases - A React Native Walkthrough

Development

The Developer’s Guide to React Native In-App Purchases

Learn how to apply different change detection strategies in Angular. Check our examples and find out which strategy works best for you.

Change Detection Strategies in Angular: Tutorial + Examples

Learn how to apply different change detection strategies in Angular - and create a high-performance Angular app. 

Change Detection Strategies in Angular: Tips + Examples

Angular is a robust web framework with a remarkable feature known as change detection. In essence, it automatically detects changes in an application’s data and updates the view accordingly. This feature is crucial to any Angular application.

But what’s not that widely known is that there are different strategies you can use to optimize the performance of change detection.

In this article, we’ll go through these change detection strategies and talk about some common pitfalls.


What is change detection?

Change detection is a feature specific to Angular. More accurately, it’s a process used to detect changes in the application state and update the view accordingly.

When an event occurs in an Angular application (i.e. user clicking a button or user changing the value of an input field), Angular runs change detection to check if there is any change in the application state.

The change detection process works by traversing the component tree in the application. It starts from the root component and checks for changes in each component. It will check for all changes in the component state and DOM elements.

In short, Angular will compare current and previous values of properties and variables defined in the component class and used in the component template.


Strategy #1: Default change detection

By default, Angular will use the CheckAlways change detection strategy. How does this work?

Angular uses a process called dirty checking to compare the current values of component state and DOM elements with their previous values. When an event occurs, Angular will run change detection to check for any changes in the template expressions in the component tree.

These expressions can be, for example, property binding, event bindings, or interpolation expressions. And as it goes, if there is a change detected, Angular will update the view.

When using Angular’s default change detection strategy, it will check every component in the tree on every event, even if no changes occurred. This may not be your best option because this can lead to performance issues. And if you have a large number of components or nested components in your Angular application, performance issues are more likely to occur.


Strategy #2: OnPush change detection

Luckily, a different change detection strategy exists. If you want to improve the overall performance of your Angular application, try using the “OnPush” change detection strategy, known as CheckOnce.

To use the OnPush strategy simply set the changeDetection property of a component to ChangeDetectionStrategy.OnPush in the @Component decorator.

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoListComponent {}

_____
todo-list.component.ts



With the "OnPush" strategy, change detection is only run on a component if one of its input properties has changed or if an event has been fired from that component.

This means that if none of a component's input properties have changed and no events have been fired, Angular will skip change detection for that component and its descendants.

Using the “OnPush” change detection strategy will reduce the number of components that need to be checked during change detection. Consequently, this leads to an improvement in overall performance of your Angular application.


Angular DevTools

To explore these strategies, we’ll be using Angular DevTools. In short, that is a browser extension providing us with debugging and profiling capabilities for Angular applications.

In the extension, there are two tabs - Components and Profiler:

 * Components tab - explore components and directives in your Angular application, preview or edit their state
 * Profiler tab - profile your application, understand where the performance bottlenecks are during change detection execution


Example app

To better understand the difference between these change detection strategies, here’s a simple example app that displays a list of to-do items.

The header title can be changed using a text input rendered in the app component. Also, you can update a single to-do item by clicking on a button rendered in the to-do list component.


Updating component @Input() using default strategy

Let’s update the header component title input by using the text field rendered in the app component.


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-cd'

  onTitleChange (title: string) {
    this.title = title
  }
}

_____
app.component.ts



<div class="app-container">
  <app-header [title]="title"></app-header>
  <div>
    <label>Title:</label>
    <input [(ngModel)]="title" type="text" /><br /><br />
  </div>
  <app-todo-list></app-todo-list>
</div>

_____
app.component.html



@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @Input() title: string = ''
}

_____
header.component.ts



<header>
  <h1>{{ title }}</h1>
</header>

_____
header.component.html



This action will be recorded with the Angular DevTools profiler. The profiler shows all change detection cycles and the components in which change detection was run during that cycle.

To see only change detections after recording, you need to select the flame graph and check the "Show only change detection" checkbox. Angular ran the change detection in components marked with blue colour.

Picture 1.2 shows that change detection was run throughout the component tree, even though only the header component input was changed.

With the default change detection, all components with template expressions ran change detection, even when it wasn't necessary (e.g., TodoListComponent and TodoItemComponent-s in our example).


Updating component @Input() using OnPush strategy

Let’s apply OnPush change detection strategy to TodoListComponent.

import { ChangeDetectionStrategy, Component } from '@angular/core'

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoListComponent {
	todoItems: string[] = ['Title 1', 'Title 2', 'Title 3']
}

_____
todo-list.component.ts



<app-todo-item
  *ngFor="let todoItem of todoItems"
  [todoItem]="todoItem"
></app-todo-item>

_____
todo-list.component.html



Now let’s record the same action and look at the flame graph in picture 1.4.. Remember, Angular ran the change detection in components marked with blue colour.

Because we used OnPush detection strategy with TodoListComponent and since nothing changed inside TodoListComponent Angular will skip change detection for that component and its descendants.


What are some common pitfalls?

When using the “OnPush” change detection strategy, Angular will only do the comparison by reference and check for changes to the reference of an input property.

In other words, if you change the contents of the object itself, the change won’t be detected. This can potentially lead to some frustrating, hard-to-detect, bugs.

When you need to change the value of an input property, a better practice would be to create a new object with new values instead of updating the existing one.

This is why it’s sometimes recommended to build Angular applications using immutable objects and lists since we can use OnPush everywhere transparently. And please keep in mind that the “OnPush” strategy isn’t always appropriate for all situations.

It largely depends on how your application is structured, how your components “communicate”, and how data flows through your components.


Final words on change detection

To conclude, Angular’s change detection strategies provide you with powerful tools to optimize the performance and user experience of your application.

Even though using the default change detection strategy may be convenient, it’s often resource-intensive and can lead to unnecessary processing and performance issues.

On the other hand, OnPush change detection minimizes these drawbacks by triggering change detection only when necessary. While using the OnPush strategy is generally recommended, be aware of the potential pitfalls.

If you understand the challenges and capabilities of the OnPush strategy and implement best practices, you can fully leverage its benefits and create high-performance, responsive Angular applications.

In case you’re looking for help with your Angular application, feel free to reach out at hello@prototyp.digital and let us know how we can help!

Change detection strategies in Angular

In this tutorial, we will go through the basics of React Native Reanimated 2 library and learn how to create smooth animations that will bring applications to life. 

Introduction to React Native Reanimated - Prototyped

React Native Reanimated


For my graduate thesis, I had to develop React Native application to promote and facilitate public participation in solving problems with the greenery of the city. Since the requirements for the application were simple I had time to experiment with the animations and make my application look cool. After some research, I decided to go with React Native Reanimated 2.


Reanimated is React Native library developed by Software Mansion. Using worklets ( JavaScript code that can be moved to a separate JavaScript VM and executed synchronously on the UI thread ) they managed to offload animation and event handling logic from the JavaScript thread to the UI thread which allows us to create smooth animations without frame drops. More detailed information on worklets and the library itself can be found in the official documentation.



Reanimated in action


Let's create some animations and bring this screen to life!



Shared values & animated styles


For the animation, shared value needs to be created. Shared values are used to maintain a reference to mutable data that can be read and modified across threads since Reanimated 2.0 runs animation code in a separate thread. Shared Value reference is created using useSharedValue hook:


const circleSize = useSharedValue(100);



Next, an animated style that "describes" the animation is created using useAnimatedStyle hook.


const animatedStyle = useAnimatedStyle(() => {
  return { width: circleSize.value, height: circleSize.value };
});



The width and height of the circle are equal to circleSize.value value. On circle press, the value is set to some random number between 100 and 350.


function onPress() {
  circleSize.value = Math.floor(Math.random() * (350 - 100 + 1)) + 100;
}



Animated style is added to the style prop of Animated.View component. Also, additional styles can be added.


return (
  <Animated.View style={[animatedStyle, styles.wrapper]}>
    <TouchableOpacity onPress={onClick} style={styles.touchableOpacity} />
  </Animated.View>
);



For now, the circle jumps to a new size each time it's pressed as presented below:


Animation helpers like withTiming and withSpring are used to animate the circle. The onPress() function now looks like this:


function onPress() {
  circleSize.value = withTiming(
    Math.floor(Math.random() * (350 - 100 + 1)) + 100,
    { duration: 200, easing: Easing.inOut(Easing.quad) }
  );
}



Animation helpers can be further modified by passing configuration objects like in the example above. For more details, you can check the animations API reference. The circle is now smoothly changing its size:


There are also animation modifiers that can be used to further modify animations. For example, withRepeat modifier allows us to repeat provided animation and withSequence allows us to create an animation sequence.


withRepeat example:


function onPress() {
  circleSize.value = withRepeat(
    withSpring(300, { damping: 5, stiffness: 80 }),
    10,
    true
  );
}



withSequence example


const translateXValue = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  return { transform: [{ translateX: translateXValue.value }] };
});

function onPress() {
  translateXValue.value = withSequence(
    withTiming(-130, { duration: 1000 }),
    withTiming(130, { duration: 200 }),
    withSpring(0, { damping: 5 })
  );
}




Gesture animations


TapGestureHandler


TapGestureHandler component from react-native-gesture-handler is used to handle tap gesture animations. To use gesture handler components event handlers need to be defined. Using useAnimatedGestureHanlder hook worklets for different gesture states such as onStart worklet, which is called when the gesture has started, can be defined. Now the example looks like this:


export default function TapGestureHandlerExample() {
  const pressed = useSharedValue(0);

  const eventHandler = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      pressed.value = 1;
    },
    onEnd: (event, ctx) => {
      pressed.value = 0;
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    const backgroundColor = withSpring(
      interpolateColor(pressed.value, [0, 1], ["yellow", "red"])
    );

    return {
      backgroundColor,
      transform: [
        { scale: withTiming(pressed.value ? 3 : 1, { duration: 700 }) },
      ],
    };
  });

  return (
    <View style={styles.wrapper}>
      <TapGestureHandler onGestureEvent={eventHandler}>
        <Animated.View style={[animatedStyle, styles.ball]} />
      </TapGestureHandler>
    </View>
  );
}



interpolateColor is used in the animated style in the example above. What it does is when our pressed.value equals 0 it returns a blue color and when it equals 1 it returns a violet color. withSpring creates a smooth transition between color changes.


PanGestureHandler


PanGestureHandler is used to handle continuous gestures like the movement of a finger on the screen. When the finger is moved across the screen a stream of touch events is sent to onActive callback. In the next example, the slider component is created. This is what the layout looks like:


<Animated.View>
  <AnimatedText
    style={styles.sliderValue}
    animatedProps={animatedProps}
    underlineColorAndroid="transparent"
    editable={false}
  />

  <View style={styles.wrapper}>
    <View style={styles.slider} />
    <PanGestureHandler onGestureEvent={eventHandler}>
      <Animated.View style={[animatedStyle, styles.ball]} />
    </PanGestureHandler>
  </View>
</Animated.View>



Like with TapGestureHandler, an event handler to pass to our PanGestureHandler component needs to be defined.


const x = useSharedValue(0);

const eventHandler = useAnimatedGestureHandler({
  onStart: (event, ctx) => {
    pressed.value = true;
    ctx.startX = x.value;
  },
  onActive: (event, ctx) => {
    x.value = ctx.startX + event.translationX;
  },
  onEnd: (event, ctx) => {
    pressed.value = false;
  },
});



Notice that in the above example onActive callback is defined which triggers as long as a finger is moved across the screen. Context is also used which is an object that is shared between all the callbacks. It can be looked at like it's a "temporary state". Lastly, animated style is defined:


const animatedStyle = useAnimatedStyle(() => {
  return {
    backgroundColor: pressed.value ? "red" : "skyblue",
    transform: [
      { translateX: x.value },
      { scale: withTiming(pressed.value ? 1.5 : 1) },
    ],
  };
});



Final result:



Showcase


I would recommend checking out William Candillon's youtube profile which is a great learning resource and full of examples. Here are some animations that I managed to make with Reanimated following his tutorials and other various blog posts:


Thank you for taking the time to read this post. Feel free to share your thoughts about this topic and drop us an email at hello@prototyp.digital.


Happy animating! 😄


AuthorMatej Mijić

Start a Project