How to prevent props changes from rerendering whole component? | Angular Community | Page 1

knotty bay Oct 16, 2022, 9:22 AM

#

I have a component that calls recursive setTimeout to do random revolve animation. It also starts from a random initial position.

  <!-- inside ocean.component.html -->
  <app-ship
    [badgeUrl]="ship.badgeUrl"
    [range]="{width:200, height:200}"
    *ngFor="let ship of ships"
  ></app-ship>

When one of the ship data (ship.badgeUrl) change, I hope it just replace the ship badge image, but it rerender this componet, whick make the revolve animation stop and start from a random position again.

How to prevent the whole component rerender when props change?

#

How to prevent props changes from rerendering whole component?

winged thorn Oct 16, 2022, 9:31 AM

#

Post your code. It shouldn't re-render the component if the badgeUrl changes. It probably re-renders the component because you replace the ship by another ship with a different badgeUrl. If so, track by is your friend. Look it up.

knotty bay Oct 16, 2022, 10:18 AM

#

You are right, trackBy let angular knows it should use the same component, instead of making a new one.

#How to prevent props changes from rerendering whole component?