【Laravel Livewire】ライフサイクルフックのhydrate、dehydrateとは何か

事の発端

hydrateとdehydrateって何だよ。

解説しているブログとか記事が無い。調べてみるか

前提

livewireは、コンポーネント内のイベントが発火する度に、バックエンドで生成したHTMLをView側で受け取り差し替えています。
バックエンド側ではHTMLを渡すと同時にコンポーネント内のプロパティをオブジェクトに変換して渡しています。

先に結論

要約すると多分こうです。

フック	説明
hydrateFoo	View側から送られてきた{ foo }オブジェクトを$fooに変換した後に実行される
dehydrateFoo	PHP側でHTMLを生成した後に$fooを{ foo }オブジェクトに変換する時に実行される

stackoverflowでの回答

サンプルコードとライフサイクル

class Counter extends Component
{
    public $count = 1;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

<div>
    <h1>{{ $count }}</h1>
 
    <button wire:click="increment">+</button>
</div>

どういう事？

サンプルのコードの動きを見てみる

chromeのlivewireデバッグ拡張機能で見てみます

+ボタンを押す

クリックで右側拡大表示

はい、生成したhtmlとオブジェクト{count : 2}を受け取っていますね

hydrateCountメソッドを追加してみよう

フック	説明
hydrateFoo	名前が$fooのプロパティがハイドレイトされた後に実行します

ライフサイクルフックにあるからどこかのタイミングで動くんだろう。試してみるか

サンプルのコードに処理を加えます

class Counter extends Component
{
    public $count = 1;

    public function increment()
    {
        $this->count++;
    }

+   public function hydrateCount()
+   {
+       $this->count++;
+   }

    public function render()
    {
        return view('livewire.counter');
    }
}

クリックします

クリックで右側拡大表示

生成されたHTMLの$countとcountオブジェクト両方3ですね。

{count:1}をhydrateする時に実行されていると、ふむ・・・、よく分からんのでdehydrateの処理を書きます

dehydrateCountメソッドを追加してみよう

フック	説明
dehydrateFoo	名前が$fooのプロパティがデハイドレイトされる前に実行します

class Counter extends Component
{
    public $count = 1;

    public function increment()
    {
        $this->count++;
    }

+   public function dehydrateCount()
+   {
+       $this->count++;
+   }

    public function render()
    {
        return view('livewire.counter');
    }
}

ん？2？？？？？？
HTML内の$countは1だけどオブジェクトのcountは2??

クリックして見るか

クリックで右側拡大表示

なるほど、HTML内の$countは3でオブジェクトのcountは4と

hydrateはオブジェクトをphpの変数に変換的な事をする時に走って、dehydrateはphpの変数をオブジェクトにして返す時に走ってるんや！！

dehydrateCountメソッドがある場合の流れ

図にするとこう、ページを開いた時の流れ。

$countが1の時にHTMLを生成しているのでHTML内では1が表示される。
HTML生成後に加算されているのでオブジェクトcountは2

初回以降の流れ