Create an reactive auxiliary class in the LWC component

Question

I've tried to create auxiliary classes in the component folder to divide logic into smaller parts, but I can't make the data on the page refresh.

for example:

Example file structure:

component/
|-component.html
|-component.js
|-component.css
|-component.js-meta.xml
|-userData.js

I've created file userData.js that will contains information about user:

helper class:

export default class UserData{
  #firstName;
  #lastName;

  constructor(firstName, lastName){
    this.#firstName = firstName;
    this.#lastName = lastName;
  }

  get lastName(){
    return this.#lastName
  }
  set lastName(value){
    if(value.length > 0){
      this.#lastName = value
    }
  }

  // rest of the code
}

In the component.js, I've imported this class and created an object:

Main JavaScript:

import {LightningElement} from 'lwc';
import UserData from './userData';

export default class Component extends LightningElement {
  userData = new UserData('firstName', 'lastName');

  handleOnChange(){
    userData.lastName = 'newLastName';
  }
}

And in the component.html the data was bound:

HTML:

<template>
  <p>{userData.firstName} {userData.lastName}</p>
  <button onclick={handleOnChange}>Click</button>
</template>

In this situation, after modifying the data in the object, HTML did not refresh the values.

Is there any way to create an auxiliary class that is reactive?

Answer 1

Unfortunately, an internal state mutation will not be observed by the LWC engine, even though the code uses @track decorator on a complex object (e.g. an instance of the custom UserData class). But you can try to reassign the userData reactive property with a new UserData instance:

export default class Component extends LightningElement {
  @track
  userData = new UserData('firstName', 'lastName');

  handleOnChange() {
    this.userData = new UserData('newFirstName', 'newLastName');
  }
}

Also if you want to keep the rest of the state of the current userData reactive property, you can clone it first, mutate its non-reactive property, and finally reassign the userData reactive property.

Docs: Reactivity for Fields, Objects, and Arrays

Answer 2

If fields are changing you should apply @track to the property, e.g.

@track
userData = new UserData('firstName', 'lastName');

See more info on Decorators.