aidd-react

React component authoring

React components live in the components/ layer per structure. Consume Observe and void actions from plugins per service. Use @adobe/data-react for useDatabase, useObservableValues, and DatabaseProvider.

---

useDatabase — single context

Constraints {
  Binding components must call useDatabase to obtain the main service context
  Do not access any other React context
  All other services and state reachable from database (db.services, db.observe, db.transactions)
  Single context is sufficient
}

Binding components must call useDatabase to obtain the main service context. Do not access any other React context. Additional contexts create a context waterfall and hurt performance. All other services and state are reachable from the database — e.g. db.services, db.observe, db.transactions — so a single context is sufficient.

---

Binding component vs presentation

BindingComponent {
  injects: "observed values via useObservableValues"
  triggers: "re-render when those values change"
  binds: "action callbacks to the presentation"
}

Presentation {
  type: "pure function (no hooks)"
  receives: "data and action callbacks as props"
  returns: "JSX"
  constraint: "Keep reactive logic in binding component; presentation stays pure"
}

---

Props from parent

Do not pass values from parent except when needed to identify which entity in the database to bind to.

When multiple instances exist (e.g. table rows), the parent passes an identifying value such as entity so the child knows which record to observe.

// Parent: passes entity so child knows which record to bind to
{values.sprites.map((entity) => (
  <Sprite key={entity} entity={entity} />
))}

// Child: uses entity prop to observe the right record
function Sprite({ entity }: { entity: Entity }) {
  const db = useDatabase();
  const values = useObservableValues(
    () => ({ sprite: db.observe.entity(entity, db.archetypes.Sprite) }),
    [entity],
  );
  // ...
}