3

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?

2 Answers 2

4

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

4
  • That's not quite accurate. If the property is not a getter/setter, it will be tracked just fine via track.
    – sfdcfox
    May 25 at 14:43
  • As far as I know and docs say that an internal state mutation of custom classes cannot be observed, it will be really great if you share some working examples)) May 25 at 15:00
  • No wonder I missed it. The docs mention this all in one short little sentence, easy to miss. I've always just presumed they were handling class instances and objects as the same thing. So, I learned a few new things today. 😅
    – sfdcfox
    May 25 at 15:11
  • Thanks, I have learned something new today as well. Btw I have found this issue from 2 years ago: github.com/salesforce/lwc/issues/1655 May 25 at 16:07
0

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

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

See more info on Decorators.

1
  • Unfortunately, the @track is not working with the class instance
    – mtk
    May 25 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.