---
title: Children
description: A child is a part every instance of an actor has, spawned with it and able to read it.
---

`child(Class, overrides)` declares an actor that spawns with its owner and lives as long as
it does. The field name is its place in the owner. Use a child for a part of the class, such
as a phone's status bar or a card's caption, and a [slot](/docs/runtime/slots) for contents the
user of the class decides.

```ts twoslash title="phone.ts"
import { child, derived, LayoutActor, signal } from "@motionactor/core";

class StatusBar extends LayoutActor {
  carrier = signal("");
  battery = signal(100);
}

export class Phone extends LayoutActor {
  name = signal("Pixel");

  status = child(StatusBar, (owner: Phone) => ({
    carrier: derived(() => `${owner.name()} Mobile`),
    battery: 82,
  }));
}
```

In a scene script and in the owner's methods, the field is the child itself:
`phone.status.carrier()` reads the child's signal and `yield* phone.status.enter()` runs its
`onEnter`.

## Overrides

The second argument sets the child's initial values. It is required when the child's class
has a field with no default, and optional otherwise.

Pass a function instead and it receives the owner, so the child's values can come from the
owner's. A `derived` override keeps reading the owner at every frame. When the scene renames
the phone, the status bar follows:

```ts twoslash
// @filename: phone.ts
import { child, derived, LayoutActor, signal } from "@motionactor/core";
class StatusBar extends LayoutActor {
  carrier = signal("");
  battery = signal(100);
}
export class Phone extends LayoutActor {
  name = signal("Pixel");
  status = child(StatusBar, (owner: Phone) => ({
    carrier: derived(() => `${owner.name()} Mobile`),
    battery: 82,
  }));
}
// @filename: phone.scene.ts
// ---cut---
import { createScene } from "@motionactor/core";
import { Phone } from "./phone";

const compiled = createScene(function* (ctx) {
  const phone = ctx.spawn(Phone);
  yield* ctx.wait(1);
  phone.name.set("Galaxy");
  yield* ctx.wait(1);
  return { phone, status: phone.status };
}).build({ viewport: { width: 1920, height: 1080 }, fps: 30 });

compiled.at(0).scene.status?.carrier; // "Pixel Mobile"
compiled.at(30).scene.status?.carrier; // "Galaxy Mobile"
```

Annotate the owner parameter with the owner's class, as `(owner: Phone)` does, so the
function can read its fields.

## Reading a child

A resolved actor does not carry its children's state. Return a child from the scene, as
`status` is above, to read it typed. Its id is in the owner's `slotChildren` under the
field's name, and the child's `parentId` and `slotName` point back.

## Reading the owner

Any hosted actor, a child or a slot's occupant, can reach its host with `this.parent()`.
Pass a class to get it typed: `this.parent(Phone)` returns the host when it is a `Phone`, and
`undefined` otherwise.

```ts twoslash
import { child, LayoutActor, signal } from "@motionactor/core";

class Badge extends LayoutActor {
  label() {
    return this.parent(Inbox)?.unread() ?? 0;
  }
}

class Inbox extends LayoutActor {
  unread = signal(3);
  badge = child(Badge);
}
```

Prefer an owner function when the child only needs values: the dependency is then written
where the child is declared, and the child's class stays free of its owner.