LitElement initialize State from Properties without default value

Question

I'm trying out Lit and I'm having trouble figuring out how to initialize a state field from props. Here's a basic contrived pagination component:

export class Pagination extends BaseElement {
  static styles = [BaseElement.styles];

  @property({type: Number})
  selected = 0;

  @state()
  _selected = this.selected;

  @property({type: Number})
  total!: number;

  @property({type: Number})
  pageSize: number = 10;

  @state()
  _numPages = Math.ceil(this.total / this.pageSize);

  render() {
    const numPages = Math.ceil(this.total / this.pageSize);

    console.log(numPages, this._numPages, this._selected);

    return html`
      <ul class="pagination">
        <li><a href="#" rel="prev">${msg("Previous", {id: 'pagination.previous', desc: 'Previous button in pagination'})}</a></li>
        ${Array.from(Array(_numPages).keys()).map((e, i) => html`<li class=${this._selected === i ? "active" : ""}><a href="#">${i + 1}</a></li>`)}
        <li><a href="#" rel="next">${msg("Next", {id: 'pagination.next', desc: 'Previous button in pagination'})}</a></li>
      </ul>
    `;
  }
}

This fails in render when using this._numPages (throws RangeError for the map because it's NaN), but is fine with numPages. It seems like if the state is using public properties that have defaults, it works, but otherwise it fails. I think this has to do with the fact that when the element is created it doesn't have props yet, so the initial first render doesn't have a value. But what is the right pattern to achieve this then in that case? The documentation here says "In some cases, internal reactive state may be initialized from public properties—for example, if there is a expensive transformation between the user-visible property and the internal state." (https://lit.dev/docs/components/properties/#public-properties-and-internal-state).

For completeness, here's a snippet of output of tsc:

import { __decorate } from "tslib";
import { html } from 'lit';
import { localized, msg } from '@lit/localize';
import { property } from 'lit/decorators/property.js';
import { state } from 'lit/decorators/state.js';
import { BaseElement } from '../BaseElement.js';
let Pagination = class Pagination extends BaseElement {
    constructor() {
        super(...arguments);
        this.selected = 0;
        this._selected = this.selected;
        this.pageSize = 10;
        this._numPages = Math.ceil(this.total / this.pageSize);
    }
    render() {
        const numPages = Math.ceil(this.total / this.pageSize);
        console.log(this._selected, this._numPages);
        return html `
      <ul class="pagination">
        <li><a href="#" rel="prev">${msg("Previous", { id: 'pagination.previous', desc: 'Previous button in pagination' })}</a></li>
        ${Array.from(Array(numPages).keys()).map((e, i) => html `<li class=${this.selected === i ? "active" : ""}><a href="#">${i + 1}</a></li>`)}
        <li><a href="#" rel="next">${msg("Next", { id: 'pagination.next', desc: 'Previous button in pagination' })}</a></li>
      </ul>
    `;
    }
};
Pagination.styles = [BaseElement.styles];
__decorate([
    property({ type: Number })
], Pagination.prototype, "selected", void 0);
__decorate([
    state()
], Pagination.prototype, "_selected", void 0);
__decorate([
    property({ type: Number })
], Pagination.prototype, "total", void 0);
__decorate([
    property({ type: Number })
], Pagination.prototype, "pageSize", void 0);
__decorate([
    state()
], Pagination.prototype, "_numPages", void 0);
Pagination = __decorate([
    localized()
], Pagination);
export { Pagination };

Answer 1

The @property decorator only declares the property for any lit-element component. To initialize the property with an default value, you need to declare it in Constructor.

I am not clear on your issue, what i understand that _numPages is giving error. So you can declare and initialize it as follow.

Below is your modified code.

export class Pagination extends BaseElement {
  static styles = [BaseElement.styles];

  @property({type: Number})
  selected = 0;

  @state()
  _selected = this.selected;

  @property({type: Number})
  total!: number;

  @property({type: Number})
  pageSize: number = 10;

  @property({type: Number})
  _numPages: number;
  
  constructor() {
    super();
    this._numPages = 10
  }

  @state()
  _numPages = Math.ceil(this.total / this.pageSize);

  render() {
    const numPages = Math.ceil(this.total / this.pageSize);

    console.log(numPages, this._numPages, this._selected);

    return html`
      <ul class="pagination">
        <li><a href="#" rel="prev">${msg("Previous", {id: 'pagination.previous', desc: 'Previous button in pagination'})}</a></li>
        ${Array.from(Array(_numPages).keys()).map((e, i) => html`<li class=${this._selected === i ? "active" : ""}><a href="#">${i + 1}</a></li>`)}
        <li><a href="#" rel="next">${msg("Next", {id: 'pagination.next', desc: 'Previous button in pagination'})}</a></li>
      </ul>
    `;
  }
}

Answer 2

Assigning the values in the class fields feels risky. I would need to review this, but I think this will not use the instance values so it might have unintended side-effects. I would wait until the instance is available (like the constructor), but, setting it in the constructor is also too soon as the property does not yet have the value from the component, rather it has the initial value from the class-field.

So we need to delay this even further.

I've solved this by using the firstUpdated lifecycle hook:

@customElement("my-component")
export class MyComponent extends LitElement {

  @property()
  myProperty: string = "";

  @state()
  _internalState: string = "";

  override async firstUpdated() {
    // avoid unnecessary calls by waiting for any pending updated to complete.
    await this.updateComplete;
    this._internalState = this.myProperty;
  }

  ...
}