Key

Key(signal, ...children) unmounts and remounts its children from scratch every time the watched signal (or any signal in an array of them) changes.

import { Key } from "@implementjs/core";

Key(route, PageFor(route));
Key([route, user], PageFor(route, user));

When to reach for it

Most of the framework updates in place. Signals patch text and props, ForEach patches row signals, and the router patches param signals on same-route navigation. Usually that's exactly what you want, but sometimes a fresh instance is the point:

• Resetting local state. A form component seeds its signal(initialValue)s once when it is created. Wrapping it in Key(recordId, ...) gives you a clean form per record.
• Re-running setup. Lifecycle.onMount hooks, subscriptions, and focus logic run again on every remount.
• Restarting media or animations. A remounted Video or CSS animation starts over.

// a fresh editor (fresh draft state) each time the selected issue changes
Key(issueId, IssueEditor(issueId));

Notes

• Key does not unwrap or transform the signal. Children close over reactive values themselves, Key only listens and remounts.
• Because children are torn down completely, everything inside loses state on each change. Uncommitted input, scroll position, subscriptions. Use it deliberately.
• For keyed identity per list item use ForEach's key function instead. Key is for a single subtree keyed on a value.

At this point you can build and update any UI. The next part is about structuring bigger apps, starting with sharing state through Context.