The request lifecycle

Understanding Livewire's request lifecycle is the bedrock of your understanding of Livewire itself. Everything else hangs off of this.

I know this flowchart is verbose, but give it a read through, it really is the best description I could come up with.

The request lifecycle

sequenceDiagram
participant Server
participant Browser
Note right of Browser: User loads page
Browser->>Server: Standard HTTP request
activate Server
Note left of Server: Laravel renders page containing a Livewire component
Note left of Server: Livewire component renders itself as HTML <br/>and embeds a JSON snapshot of its state in the HTML
Server->>Browser: Standard HTTP response
deactivate Server
Note right of Browser: Browser renders page
Note right of Browser: Livewire's JavaScript initializes components on <br/>page and stores state in JavaScript runtime
Note right of Browser: User clicks a Livewire button on page
Note left of Browser: Livewire component's state snapshot is sent <br/>along with what action should be performed
Browser-->>Server: Ajax Request
activate Server
Note left of Server: Livewire component is created from state snapshot
Note left of Server: Livewire component handles action
Note left of Server: Livewire component is rendered to new HTML
Note left of Server: Livewire creates new state snapshot
Server-->>Browser: Ajax response
deactivate Server
Note left of Browser: Livewire component's new state snapshot is sent <br/>along with new HTML
Note right of Browser: Livewire's JavaScript stores new state snapshot
Note right of Browser: Livewire swaps the current component's HTML on <br/>the page with the new HTML from the server

Loading

Ok, now that you've seen the request lifecycle and have been exposed to the core mechanisms behind Livewire.

Here's a glossary of terms you need to understand to contribute to the core, or even hold a conversation about.

Glossary of terms

Term	Definition
Initial Request	The initial HTTP request that is made to Laravel to render the page containing Livewire components
Mount	"Mounting" a Livewire component means booting it up and rendering it for the first time
Initial Response	The initial HTTP response from Laravel with the HTML for the entire page containing Livewire components
Dehydrate	Dehydrating a component means taking a live in-memory PHP component object and converting it to a snapshot that can be sent to JavaScript and eventually back to PHP
Hydrate	Hydrating a component means building up an in-memory PHP component class from a JSON snapshot of the component (usually from JavaScript)
Subsequent Request	The Ajax request triggered by Livewire to Laravel to update a Livewire component
Subsequent Response	The Ajax response sent by Laravel after a dedicated Livewire component update
Snapshot	The JSON object used to store the state of a Livewire component in JavaScript and re-build it back up in PHP
Checksum	A hash used to verify that a snapshot wasn't tampered with in JavaScript
State	The "frozen
Data	The public property data associated with a Livewire component. This data is both accessible from PHP AND JavaScript
Metadata	Additional data associated with public properties on a Livewire component, used to re-build the JavaScript data back into PHP rich types
Methods	A list of available methods to call on a component. Usually, these are public methods defined on the component class
Diff	A list of updates to perform on the component's data during a request. Generated and triggered by JavaScript (usually with wire:model) to be updated on the PHP server
Calls	A list of method calls (containing names and parameters) to make on the Livewire component (usually from things like wire:click) after it's "hydrated" on the backend during a subsequent request
Morphing DOM	The process of swapping a component's HTML rendered on the page with new HTML from the server (from an update). Rather than entirely replacing the old HTML with the new HTML, Livewire uses a process called "morphing" to intelligently crawl the DOM and compare it with the new HTML for changes. It will only make an update when there is a difference between the HTML on the page, and the HTML from the server