# Migrating to v4

The goal of v4 is to make ForesightJS easier to set up. In v3 there were no official React, Vue, or Angular packages - the docs handed you a hook, composable, and directives to copy into your own project. v4 replaces that with official wrapper packages: [`@foresightjs/react`](/docs/react/installation.md), [`@foresightjs/vue`](/docs/vue/installation.md), and [`@foresightjs/angular`](/docs/angular/installation.md). Install one, delete your copied files, and update a couple of names.

The breaking changes in core `js.foresight` exist to support these wrappers: frameworks like React, Vue, and Angular need immutable state snapshots and a subscription model to render reactively, so the core's element data was reworked into exactly that. These changes affect you even if you don't use the wrapper packages - see [Core](#core) below.

## Core[​](#core "Direct link to Core")

The `register()` call itself is unchanged, but element data is now an immutable state snapshot you can subscribe to - the foundation the wrapper packages are built on:

* **`ForesightElementData` is now `ForesightElementState`.** Your callback receives the flat state snapshot: `callback: (state: ForesightElementState) => void`. See [TypeScript](/docs/getting-started/typescript.md).
* **`register()` returns the state plus `unregister`, `subscribe` and `getSnapshot`.** `isTouchDevice` is gone from the result; touch devices are handled internally by the configured `touchDeviceStrategy` global setting.
* **The `elementDataUpdated`, `elementOptionsUpdated` and `elementReactivated` events are removed.** Per-element changes are now observed through the `subscribe`/`getSnapshot` pair returned by `register()`. The remaining events carry the state in a `state` field instead of `elementData`.
* **Detached elements are parked, not unregistered.** Removing an element from the DOM no longer emits `elementUnregistered` with reason `disconnected`; the element stays registered but inactive and resumes when it reconnects.
* **New `enabled` element option.** Set it to `false` to keep an element registered but excluded from prediction.

## React, Vue, and Angular[​](#react-vue-and-angular "Direct link to React, Vue, and Angular")

Using one of the wrapper packages? Switch framework with the dropdown at the top of the sidebar to get the package migration guide: [React](/docs/react/migrating-to-v4.md), [Vue](/docs/vue/migrating-to-v4.md), or [Angular](/docs/angular/migrating-to-v4.md).