Development questions

What is reactivity in LWC and when does a field trigger a re-render?

DevelopmentEasy

A component re-renders when a reactive field used in the template changes.

  • Since Spring '20, all class fields are reactive, but only on reassignment (primitives, or assigning a new object/array).
  • To react to mutations inside an object or array (e.g. this.obj.name = 'x' or this.list.push(x)), either use @track or reassign a new copy: this.list = [...this.list, x];.
  • @api properties are reactive but owned by the parent, so don't mutate them in the child.
  • Getters are re-evaluated on each render.

Only fields actually used in the template (or getters used there) trigger a re-render.

lwcreactivityfundamentals