How to update a property when another has changed?

[Vincent Agnano]

When one property changed from attribute, I want to update another state attribute.

My app

<x-user id=8></x-user>

x-user.js

class XUser {
  init() {
    this.state = { user: {}, id: null }
  }
  async connected() {
    const response = await request.get(`/api/user/${this.state.id}`)
    this.state.user = response.data
  }
}

Now that state.user is initialized when the component is connected, changing <x-user id=8> to <x-user id=9> won't change state.user as connected() is not called anymore.

Suggestions:

• adding a lifecycle event changed(prop, newValue, oldValue)
• or auto calling a method onIdChanged(newValue, oldValue)