Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bgass's avatar
Level 12

Prevent livewire to constantly refresh page, but still update data values

Hi!

I'm trying to create a particular livewire component. Basically, it is an input and a "page". The idea is to write a "command" in the input. The first part is a key to load the page, the second part of the command are parameters.

So, for instance, if you write fx 3x-5,-5,5, it should open the page fx and pass the parameters to the page (I'm math teacher :) ).

Basically, it is working... but I have a problem. Once I wrote the beginning of the command fx, the page is loaded as it should, without any parameters. But after that, when I add the parameters, the page is constantly refreshing.

My code for the view:

<div>
	<input autofocus type="search"
		   wire:model.debounce.500ms="input_value"
		   placeholder="Entrer un code..."
		   class="border rounded p-3 focus:outline-none focus:shadow-outline-blue w-full" >
	
	<p>Counts: {{ $renderCount }}</p>
	<div>
		@includeIf($current_page)
	</div>
	
</div>

And my code for the component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Toolbox extends Component {
	public string|null $current_page = null;
	public string $input_value = '';
	public string $key = '';
	public string $previousKey ='';
	public string $params = '';
	public int $renderCount = 0;

	protected $rules = [
		'inputValue' => 'required|string|min:4'
	];

	private function get_tool() {
		$this->key    = explode( ' ', $this->input_value )[0];
		$this->params = trim( mb_substr( $this->input_value, mb_strlen( $this->key ) + 1 ) );

		if ( view()->exists( 'themes.tools.' . $this->key ) ) {
			$this->current_page = 'themes.tools.' . $this->key;
			return;
		}

		// Reset the page to nothing
		$this->current_page = null;
	}

	public function render() {
		$this->get_tool();

		$this->renderCount++;
		return view( 'livewire.toolbox' );
	}

	public function increment() {
		dd('here');
		$this->renderCount++;
	}
}

The main problem is, in particular with the function, is that the loaded page plots a function and add it dynamically. When the page is refreshed, this added div>svg is automatically deleted. I would need to reinitialize it each times.

Is there a better way to do this ? Notice that I also tried to replace the @includeIf($current_page) by a livewire component accepting a parameter like this <livewire:toolpage-page :page="$key"/>, but unfortunately, the component is never updated :(

Hope you can help :) (and also understand what I wrote)

0 likes
9 replies
aurawindsurfing's avatar

If Livewire loops usually it is due to not knowing to which element it should relate. Try adding wire:key to your div. Have a look here: https://laravel-livewire.com/docs/2.x/troubleshooting

So in your case:

<div wire:key="foo">
	<input autofocus type="search"
		   wire:key="bar"
		   wire:model.debounce.500ms="input_value"
		   placeholder="Entrer un code..."
		   class="border rounded p-3 focus:outline-none focus:shadow-outline-blue w-full" >
	
	<p>Counts: {{ $renderCount }}</p>
	<div>
		@includeIf($current_page)
	</div>
	
</div>

And see it it helps

1 like
bgass's avatar
Level 12

I tried - but it doesn't work. In fact, just to be clear, I have only one livewire element.

Maybe I'm misunderstanding how livewire works: when a value is updated, does this mean the whole livewire component is updated ? Or can we force updating only a part of the component ? The latter is what I'm trying to achieve...

bgass's avatar
Level 12

I'm aware of the lazy loading. The fact is I want the values to be updated while I'm typing. It's necessary for adjusting various parameters and display the result. So unfortunatly, it isn't the path I'm using :)

aurawindsurfing's avatar

@bgass does your counter increment on every self refresh of the page?

public function render() {
		$this->get_tool();

		$this->renderCount++;
		return view( 'livewire.toolbox' );
	}

It looks like it should if it is livewire which is refreshing your page.

bgass's avatar
Level 12

The counter is refreshing each time I'm typing. It's important to say that the livewire component is working as it should. What I want is stop making working like this !!!!

For example, when I'm writing: fx 3x+2,-10,10

When I'm writing the first letters, the livewire component should work as usual, until it "founds" a particular value (fx in this case). The component know there is a new page to be loaded and it loads. Perfect until now.

The problem is when I continue typing to give the paramters: the component should know that it already has loaded the fx page and that it should NOT refresh the component, but instead only refresh some "javascript/alpine" values (or an input). My problem is that I can't stop the livewire component to completely refresh when I'm typing.

raphyabak's avatar

Might be late but maybe you should try wire:ignore after typing the value fx

christmex's avatar

check this out #deferred-updating on livewire documentation

im new here, so i cant insert any links, thank you

Bayut-Pk's avatar

Is there a way to use lazy updating of livewire with Filament, I have a Filament dashboard page which I want to lazy update instead of updating on every filter selection I make

Please or to participate in this conversation.