A-Frame Entity-Component System: Component Initialization Order

Short answer

There is no built‑in mechanism in A‑Frame to force a specific init() execution order. The dependencies array in a component schema only guarantees that the listed sibling components are present; it does not change the sequence in which init() runs.

Confirmed facts

• A‑Frame invokes each component’s init() method in the exact order the components appear in the entity’s HTML markup.
• The dependencies property is processed after markup parsing to add missing components, but it does not reorder init() calls.
• The framework emits a componentinitialized event on an entity each time a component finishes its init() phase.
• The entity’s loaded event fires after all components attached at parse time have completed init() (but before the first render tick).

Practical steps to synchronize interdependent components

1. Listen for the dependency’s initialization – In the component that needs data from another component, subscribe to the componentinitialized event (or the entity’s loaded event) and run your setup code in the callback.
2. Example code

   AFRAME.registerComponent('needs-data', {
     init: function () {
       this.el.addEventListener('componentinitialized', (e) => {
         if (e.detail.name === 'provides-data') {
           // The provider’s init has finished; safe to read its data.
           const data = this.el.components['provides-data'].getData();
           this.useData(data);
         }
       });
     },
     useData: function (d) { /* … */ }
   });
   

3. Alternative: a tiny manager component – If you have many interdependent parts, create a manager that waits for all required components to signal readiness (via componentinitialized) before executing the shared logic.
4. When to consider tick – Only use a per‑frame flag if you cannot guarantee that the dependency will have initialized before the first render (e.g., the dependency is added dynamically after the entity is already in the scene). Remember that tick runs every frame and should be removed once the condition is met to avoid overhead.

Verification you can perform

1. Create two components, A and B, that log a timestamp in init(). Place them in different orders in the markup and confirm the log order matches the markup regardless of any dependencies array.
2. Add a listener for componentinitialized in component A that checks for B’s initialization. Verify that the callback runs after B’s log appears.
3. Check the A‑Frame documentation under “Component Lifecycle” and “Component Schema” for the statements about init order and the dependencies property.