Skip to content

The component lifecycle

A component's lifecycle begins with the initial render and goes on for as long as it is present on the browser page.
It can span many requests, starting from the initial page request throughout many Ajax requests.
When a visitor leaves the page it is rendered on, the component's life "comes to an end".

Technically a PHP component is instantiated once during each request, but because the component property values are synchronized between front end in JavaScript and the PHP backend for each request, the lifecycle is viewed as extending beyond the time during which the object exists in memory.

A component's lifecycle can be split into several phases.

First, there are two types of requests during a component's life:

  • The preceding request (the "initial render")
  • Subsequent requests (Ajax requests after user interaction)

Each request can also be split into several phases.

On subsequent requests, component properties are restored to their previous values by Magewire. This process is called hydration.
Hydration only happens on subsequent requests. During the preceding request, properties are set to their default values.
This allows us to split a request into the phases

  • Before hydration
  • After hydration

Further along subsequent requests, after hydration, component properties are updated to their new values. This gives us yet another way to split a request into phases:

  • Before properties are updated
  • After properties are updated

Finally, the properties of a component are serialized and sent to the front end, so they can be used for hydration during subsequent requests.
The process of serializing component properties is called dehydration.

After a component is dehydrated, it is inert until the next subsequent request.