Issue with rendering items fetched via a promise

[joeattardi]

I think I may be misunderstanding something about how Lit renders, but I'm having an issue.

I have an emoji picker element. It renders a grid of emojis. These emojis area loaded from a database asynchronously (so a Promise is involved).

I am firing off the request in the connectedCallback. It makes the async call and waits on the promise, then it updates a property of the class emojis which is decorated with the state() decorator:

  @state()
  private emojis: EmojiRecord[];

  connectedCallback() {
    super.connectedCallback();
    this.emojiData.getEmojis(this.category, this.emojiVersion).then(emojis => this.emojis = emojis);
  }

My render method calls to a helper method which renders either the emojis, if they're loaded, or nothing:

  private renderEmojis() {
    console.log(this.emojis);
    return this.emojis ? this.emojis.map(emoji => html`<picmo-emoji .emoji=${emoji}></picmo-emoji>`) : nothing;
  }

This all works as expected.

Here's my problem. I am adding a preview element. The main picker has a state property that keeps track of the currently hovered emoji. When the mouseover event is triggered on an emoji, it fires a custom event which is received by the root emoji picker element. It updates the state property to update the hovered emoji.

When this happens, all my emojis seem to be destroyed and re-rendered again. The database call is made again to load the emojis. I had assumed that using @state() on the emoji list would remember the previous value, but every time through it comes back as undefined and has to load again.

I assume this means that during the re-rendering process of the root emoji picker element, this element is getting completely destroyed? I'm not sure what I am missing here but since that emoji data never changes, I am looking for how I can "remember" the loaded emojis and not discard and re-load them when a parent is rendered.

Thank you!

[bennypowers]

I would suggest storing the data on the element object, such that reconnecting to the DOM will not trigger a refetch. I'm also noticing that the emoji data depends on the category and version, so we can cache by those as well, and do that whenever the dependencies change.

@property() category?: Category;
@property() emojiVersion?: Version;

@state() private data?: EmojiData;

#map = new Map<`${Category}-${Version}`, EmojiData>();

updated(changed) {
  if (changed.has('category') || changed.has('emojiVersion'))
    this.#updateIcons();
}

async #updateIcons() {
  const key = `${this.category}-${this.version}`;
  if (!this.#map.has(key))
    this.#map.set(key, await somehowFetchCategory(this.category, this.emojiVersion);
  this.data = this.#map.get(key);
}

[joeattardi]

The category and emoji version won't change, so those shouldn't be an issue.

Basically there is the root picker element. Internally it goes to each category and renders an emoji-category element (each one loads its emojis, should only be needed once).

It's just when I hover over one and it dispatches my custom event. The event is handled in the root emoji picker element which updates the currentPreview state.

This rerenders the children, and the previously set array of emojis in each emoji-category suddenly become undefined again and it has to fetch again.

I may be able to resolve this by doing all the fetching in the root element, but there is also a search element which may run into the same issue. New results are queried as a search query is typed. I imagine the same thing would happen there, right?

Is there a way I can handle the hover event and update the preview state without losing the previous emojis I already have set in the state?

[justinfagnani]

Can you make a small reproduction at all? I'm having a hard time what's happening with the preview data flow. The database can be replaced by a local async function.

One thing that could be happening is if you're reassigning the emojis array, you'll see a re-render even if the contents are the same. This is because Lit uses simple equality comparison for reactive properties (===). It doesn't deeply compare objects or arrays.

[joeattardi]

Of course, I will throw something together soon. Thanks!

[joeattardi]

I put together as minimal of a reproduction as I could here: https://codesandbox.io/s/litelement-typescript-forked-m1wgg8

I followed the same logic, more or less, as my actual library. When I hover over an emoji, it looks like everything gets destroyed and re-loaded again.

I tried a slight change, actually, which seems to resolve the problem:

Instead of rendering this way (in EmojiPicker.ts):

async renderPicker() {
    await this.dataPromise;

    return html`
      <div>
        <h1>Emojis</h1>
        ${this.categories.map(
          (category) =>
            html`<emoji-category
              .category=${category}
              @preview=${this.updatePreview}
            ></emoji-category>`,
        )}
        <div class="preview">
          Preview: ${this.currentPreview}
        </div>
      </div>
    `;
  }

  render() {
    return until(this.renderPicker(), html`<h1>Loading...</h1>`);
  }

I removed the await and just checked if the categories were defined:

renderPicker() {
    return html`
      <div>
        <h1>Emojis</h1>
        ${this.categories.map(
          (category) =>
            html`<emoji-category
              .category=${category}
              @preview=${this.updatePreview}
            ></emoji-category>`,
        )}
        <div class="preview">
          Preview: ${this.currentPreview}
        </div>
      </div>
    `;
  }

  render() {
    if (this.categories) {
      return this.renderPicker();
    }

    return html`<h1>Loading...</h1>`;
  }

Now my preview works as expected. I'd like to understand why this fixes it. Is it because awaiting the promise, even if it's already resolves, takes one turn of the event loop so for a moment it doesn't have the data so everything is destroyed and re-rendered?

Not sure if my fixed version is the idiomatic Lit way to do it, but it seems to work.

Thank you!

[drk-mtr]

I'm a beginner with lit, but I believe it might be because renderPicker() gets called on every update.

I'd use the @lit-labs/task library for this, but sounds like your way works too :)