diff --git a/README.md b/README.md
index ddb6dd0..a600252 100644
--- a/README.md
+++ b/README.md
@@ -70,11 +70,11 @@ import { ElementAccessor, defineComponent } from 'hydroactive';
 import { WriteableSignal } from 'hydroactive/signals.js';
 
 // `defineComponent()` creates a web component class based on the given hydrate
-// function. The callback is invoked on hydration and provides `comp` and `host`
+// function. The callback is invoked on hydration and provides `host` and `comp`
 // parameters with additional functionality to provide interactivity to the
 // pre-rendered component. Automatically calls `customElements.define` under the
 // hood.
-const MyCounter = defineComponent('my-counter', (comp, host) => {
+const MyCounter = defineComponent('my-counter', (host, comp) => {
     // Interacting with a site using HydroActive is a three-step process:
     // 1. Query it - `host.query` queries the DOM for the selector and asserts
     // it is found.
diff --git a/src/component.test.ts b/src/component.test.ts
index 9eafc3d..147f34d 100644
--- a/src/component.test.ts
+++ b/src/component.test.ts
@@ -60,8 +60,8 @@ describe('component', () => {
       document.body.appendChild(comp);
 
       expect(hydrate).toHaveBeenCalledOnceWith(
-        ComponentRef._from(ElementRef.from(comp)),
         ComponentAccessor.fromComponent(comp),
+        ComponentRef._from(ElementRef.from(comp)),
       );
     });
 
diff --git a/src/component.ts b/src/component.ts
index 17515c7..fe4e3bd 100644
--- a/src/component.ts
+++ b/src/component.ts
@@ -7,8 +7,8 @@ import { HydroActiveComponent } from './hydroactive-component.js';
 
 /** The type of the lifecycle hook invoked when the component hydrates. */
 export type HydrateLifecycle = (
-  comp: ComponentRef,
   host: ComponentAccessor<HydroActiveComponent>,
+  comp: ComponentRef,
 ) => void;
 
 /**
@@ -21,7 +21,7 @@ export function defineComponent(tagName: string, hydrate: HydrateLifecycle):
     public override hydrate(): void {
       const ref = ComponentRef._from(ElementRef.from(this));
       this._registerComponentRef(ref);
-      hydrate(ref, ComponentAccessor.fromComponent(this));
+      hydrate(ComponentAccessor.fromComponent(this), ref);
     }
   };
 
diff --git a/src/demo/attrs/read-attr.ts b/src/demo/attrs/read-attr.ts
index fe2987b..5ab13fd 100644
--- a/src/demo/attrs/read-attr.ts
+++ b/src/demo/attrs/read-attr.ts
@@ -2,7 +2,7 @@ import { AttrAccessor, defineComponent } from 'hydroactive';
 import { bind } from 'hydroactive/signal-accessors.js';
 
 /** Reads an attribute from the host element. */
-export const ReadAttr = defineComponent('read-attr', (comp, host) => {
+export const ReadAttr = defineComponent('read-attr', (host, comp) => {
   // `comp.host` is an `ElementAccessor` of the host element (`read-attr`).
   // `ElementAccessor` has an `attr` method which provides an `AttrAccessor`.
   const idAttr: AttrAccessor = host.attr('user-id');
diff --git a/src/demo/counter/auto-counter.ts b/src/demo/counter/auto-counter.ts
index ba6501f..6a19a41 100644
--- a/src/demo/counter/auto-counter.ts
+++ b/src/demo/counter/auto-counter.ts
@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Automatically increments the count over time. */
-export const AutoCounter = defineComponent('auto-counter', (comp, host) => {
+export const AutoCounter = defineComponent('auto-counter', (host, comp) => {
   // Create a "live" binding of the `<span>` element's text content, but
   // interpreted as a `number`. Automatically parses the value.
   const count = live(host.query('span').access(), comp, Number);
diff --git a/src/demo/counter/bind-counter.ts b/src/demo/counter/bind-counter.ts
index a2c3755..077a36b 100644
--- a/src/demo/counter/bind-counter.ts
+++ b/src/demo/counter/bind-counter.ts
@@ -6,7 +6,7 @@ import { WriteableSignal, signal } from 'hydroactive/signals.js';
  * Automatically increments the count over time. Uses `comp.bind` instead of
  * `comp.live` to demonstrate the underlying primitives.
  */
-export const BindCounter = defineComponent('bind-counter', (comp, host) => {
+export const BindCounter = defineComponent('bind-counter', (host, comp) => {
   // Queries the DOM for the `<span>` tag.
   const span: Dehydrated<HTMLSpanElement> = host.query('span');
 
diff --git a/src/demo/counter/button-counter.ts b/src/demo/counter/button-counter.ts
index 65ebdef..253b54f 100644
--- a/src/demo/counter/button-counter.ts
+++ b/src/demo/counter/button-counter.ts
@@ -4,7 +4,7 @@ import { live } from 'hydroactive/signal-accessors.js';
 /**
  * A counter which increments and decrements the count based on button clicks.
  */
-export const ButtonCounter = defineComponent('button-counter', (comp, host) => {
+export const ButtonCounter = defineComponent('button-counter', (host, comp) => {
   const count = live(host.query('span').access(), comp, Number);
 
   // Listen for click events and update the count accordingly. Event listeners
diff --git a/src/demo/hello-world/hello-world.ts b/src/demo/hello-world/hello-world.ts
index 6fd742e..a2d3849 100644
--- a/src/demo/hello-world/hello-world.ts
+++ b/src/demo/hello-world/hello-world.ts
@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Says hello to HydroActive on hydration. */
-export const HelloWorld = defineComponent('hello-world', (comp, host) => {
+export const HelloWorld = defineComponent('hello-world', (host, comp) => {
   const name = live(host.query('span#name').access(), comp, String);
   name.set('HydroActive');
 });
diff --git a/src/demo/hooks/custom-hook.ts b/src/demo/hooks/custom-hook.ts
index a03a35f..dcde351 100644
--- a/src/demo/hooks/custom-hook.ts
+++ b/src/demo/hooks/custom-hook.ts
@@ -3,7 +3,7 @@ import { bind } from 'hydroactive/signal-accessors.js';
 import { Signal, signal } from 'hydroactive/signals.js';
 
 /** Demonstrates a custom hook for controlling the count timer. */
-export const CustomHook = defineComponent('custom-hook', (comp, host) => {
+export const CustomHook = defineComponent('custom-hook', (host, comp) => {
   const initial = host.query('span').access().read(Number);
 
   // Create a signal which is automatically incremented every second. Bound to
diff --git a/src/demo/hydration/deferred-comp.ts b/src/demo/hydration/deferred-comp.ts
index a0e2613..16f783d 100644
--- a/src/demo/hydration/deferred-comp.ts
+++ b/src/demo/hydration/deferred-comp.ts
@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Says hello to HydroActive on hydration. */
-export const DeferredComp = defineComponent('deferred-comp', (comp, host) => {
+export const DeferredComp = defineComponent('deferred-comp', (host, comp) => {
   const name = live(host.query('span').access(), comp, String);
   name.set('HydroActive');
 });
diff --git a/src/demo/hydration/deferred-composition.ts b/src/demo/hydration/deferred-composition.ts
index 44e7808..8f03b7f 100644
--- a/src/demo/hydration/deferred-composition.ts
+++ b/src/demo/hydration/deferred-composition.ts
@@ -3,7 +3,7 @@ import { DeferredCompositionChild } from './deferred-composition-child.js';
 import { bind } from 'hydroactive/signal-accessors.js';
 
 /** Demonstrates accessing and hydrating child components. */
-export const DeferredComposition = defineComponent('deferred-composition', (comp, host) => {
+export const DeferredComposition = defineComponent('deferred-composition', (host, comp) => {
   // `.access` asserts the component is already hydrated.
   const firstName = host.query('#first')
       .access(DeferredCompositionChild)
diff --git a/src/demo/reactivity/cached-value.ts b/src/demo/reactivity/cached-value.ts
index bc9ffba..18e17ce 100644
--- a/src/demo/reactivity/cached-value.ts
+++ b/src/demo/reactivity/cached-value.ts
@@ -3,7 +3,7 @@ import { bind, live } from 'hydroactive/signal-accessors.js';
 import { cached } from 'hydroactive/signals.js';
 
 /** Uses `cached` to avoid repeatedly executing an expensive computed signal. */
-export const CachedValue = defineComponent('cached-value', (comp, host) => {
+export const CachedValue = defineComponent('cached-value', (host, comp) => {
   const count = live(host.query('#count').access(), comp, Number);
   host.query('button').access().listen(comp, 'click', () => {
     count.set(count() + 1);
diff --git a/src/demo/reactivity/computed-value.ts b/src/demo/reactivity/computed-value.ts
index fa274d7..2010418 100644
--- a/src/demo/reactivity/computed-value.ts
+++ b/src/demo/reactivity/computed-value.ts
@@ -3,7 +3,7 @@ import { bind, live } from 'hydroactive/signal-accessors.js';
 import { Signal } from 'hydroactive/signals.js';
 
 /** Displays a value computed from another value in the DOM. */
-export const ComputedValue = defineComponent('computed-value', (comp, host) => {
+export const ComputedValue = defineComponent('computed-value', (host, comp) => {
   // Create a signal for the real underlying value.
   const count = live(host.query('#count').access(), comp, Number);
 
diff --git a/src/demo/reactivity/signal-effect.ts b/src/demo/reactivity/signal-effect.ts
index e852f23..4937ea8 100644
--- a/src/demo/reactivity/signal-effect.ts
+++ b/src/demo/reactivity/signal-effect.ts
@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { signal } from 'hydroactive/signals.js';
 
 /** Creates a side effect from a signal. */
-export const SignalEffect = defineComponent('signal-effect', (comp, host) => {
+export const SignalEffect = defineComponent('signal-effect', (host, comp) => {
   const countLabel = host.query('#count').access();
   const initial = countLabel.read(Number);
   const count = signal(initial);
diff --git a/src/demo/shadow/closed-shadow.ts b/src/demo/shadow/closed-shadow.ts
index edee0d6..9996eec 100644
--- a/src/demo/shadow/closed-shadow.ts
+++ b/src/demo/shadow/closed-shadow.ts
@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Accesses the shadow DOM with `host.shadow`. */
-export const ClosedShadow = defineComponent('closed-shadow', (comp, host) => {
+export const ClosedShadow = defineComponent('closed-shadow', (host, comp) => {
   // Query the shadow DOM under `host.shadow`.
   const shadowDiv = live(host.shadow.query('div').access(), comp, String);
   shadowDiv.set('I\'m blue,');
diff --git a/src/demo/shadow/open-shadow.ts b/src/demo/shadow/open-shadow.ts
index de34ec2..dbdd2b8 100644
--- a/src/demo/shadow/open-shadow.ts
+++ b/src/demo/shadow/open-shadow.ts
@@ -2,7 +2,7 @@ import { defineComponent } from 'hydroactive';
 import { live } from 'hydroactive/signal-accessors.js';
 
 /** Accesses the shadow DOM with `host.shadow`. */
-export const OpenShadow = defineComponent('open-shadow', (comp, host) => {
+export const OpenShadow = defineComponent('open-shadow', (host, comp) => {
   // Query the shadow DOM under `host.shadow`.
   const shadowDiv = live(host.shadow.query('div').access(), comp, String);
   shadowDiv.set('I\'m red!');