Understanding Livewire Overhead: Two components = two requests?

Hey,

I was experimenting with L12 / Livewire and Volt. I wanted to get going by creating a SixDigitInput, which could be used for PINs and stuff. The user enters a digit, and the UI focuses the next digits input.

I then want pass the resulting complete concatinated number, to my parents component to do stuff with it.

My code does work, but when I enter a digit to my nested component, I can see that 2 network requests are being made (one for my nested component, and one for my page component). Is that how it is supposed to be?

If so, if I have many nested reusable components, will I not essentially DDOS my own server? Do folks go around this by having just one level of livewire and basic blade-components for reusable stuff?

Just for reference, here is my code:

<?php
 
use Livewire\Volt\Component;
use Livewire\Attributes\Modelable;
 
new class extends Component {
    #[Modelable]
    public string $code = '';

    public string $dig_1 = '';
    public string $dig_2 = '';
    public string $dig_3 = '';
    public string $dig_4 = '';
    public string $dig_5 = '';
    public string $dig_6 = '';

    public function updated()
    {
        $this->code = $this->dig_1 . $this->dig_2 . $this->dig_3 . $this->dig_4 . $this->dig_5 . $this->dig_6;
    }
} ?>

<div x-data="{ currentIndex: 0, shiftFocus(index, event) {
    if (['1','2','3','4','5','6','7','8','9','0'].includes(event.key)) {
        $el.querySelector(`input[name='dig_${index}']`).value = '';
        $nextTick(() => {
            $wire.$refresh();
            $el.querySelector(`input[name='dig_${index + 1}']`)?.focus()
        });
        return;
    }
    if (event.key === 'Backspace' && index > 1) {
        $nextTick(() => {
            $wire.$refresh();
            $el.querySelector(`input[name='dig_${index - 1}']`).value = '';
            $el.querySelector(`input[name='dig_${index - 1}']`).focus();
        });
        return;
    }
    event.preventDefault();
} }" class="flex gap-2">
    <flux:input wire:model="dig_1" class:input="text-center" @keydown="shiftFocus(1, $event)" type="text" maxlength="1" name="dig_1" required autofocus  />
    <flux:input wire:model="dig_2" class:input="text-center" @keydown="shiftFocus(2, $event)" type="text" maxlength="1" name="dig_2" required />
    <flux:input wire:model="dig_3" class:input="text-center" @keydown="shiftFocus(3, $event)" type="text" maxlength="1" name="dig_3" required  />
    <flux:input wire:model="dig_4" class:input="text-center" @keydown="shiftFocus(4, $event)" type="text" maxlength="1" name="dig_4" required />
    <flux:input wire:model="dig_5" class:input="text-center" @keydown="shiftFocus(5, $event)" type="text" maxlength="1" name="dig_5" required />
    <flux:input wire:model="dig_6" class:input="text-center" @keydown="shiftFocus(6, $event)" type="text" maxlength="1" name="dig_6" required />
</div>

And used like this

        <livewire:inputs.six-digit-input wire:model.live="code" />

        XX{{ $this->code }}XX