Some race-condition when used with lit-element

[davidsteinberger]

I used useContext, useState, useEffect in a setup like this:

render() {
  const { docs } = useContext(DBContext);
  const [users, setUsers] = useState([]);
  useEffect(
    () => {
      const dbUsers = docs
      .filter(({ doc: { type } }) => type === 'user')
      .map(user => ({ ...user, isEditing: false }));
      setUsers(dbUsers);
    },
    [docs]
  );

  return html`
    ${users.map(user => html`
      ...
    `)}
  `;
}

However ${users.map()} is not invoked after setUsers() is called.

When I change my update function like below it seems to work:

async update(changedProperties) {
  this.hauntedState.run(() => super.update(changedProperties));
  await this.updateComplete;
  this.hauntedState.runEffects();
}

[matthewp]

Are you using a Haunted / lit-element integration? If so it seems like you want to submit the bug there.

[davidsteinberger]

I just used it in a class that's extended from LitHauntedElement. That, of course, may not be directly related to haunted, but I thought I should mention it. Is it safe to call runEffects() directly after the super.update() as mentioned in that gist?

[matthewp]

I think this is related to the lit-element integration. I think what is happening is that lit-element likely ignores requestUpdate() when it happens inside of an update(). By waiting for updateComplete it starts accepting requestUpdate() again.