Why can renderedCallback run multiple times and how do you prevent repeated execution?

renderedCallback fires after every render, and any change to a reactive property used in the template triggers a re-render. Also, it runs for each component in the tree.

Pitfalls: one-time setup (loading a library, attaching listeners) would repeat, and changing a reactive property inside it can cause an infinite render loop.

Fix: use a guard flag:

renderedCallback() {
  if (this.initialized) return;
  this.initialized = true;
  // one-time DOM work
}

Put data loading in connectedCallback and avoid setting tracked state in renderedCallback unless guarded.