Laravel Livewire - How to force child component refresh
Stefan Bogdanescu
Founder & Senior Architect · 2026-06-29
# Laravel Livewire: How to Force Child Component Refresh
When building complex UIs with Livewire, managing the state synchronization between parent and child components is crucial. A very common scenario arises when a change in the parent component necessitates an update in a deeply nested child component. As you've discovered, simply updating properties in the parent doesn't always automatically trigger a refresh in the child, which can lead to stale data being displayed.
This post will walk you through why this happens and provide practical, robust solutions for forcing your child Livewire component to refresh when its parent is updated.
## The Livewire Synchronization Challenge
In your example setup, you have `UserShow` (the parent) managing the user selection and potentially updating the `$user` object, and `UserShowEmail` (the child) displaying the email based on that user.
When you call a method like `updatedUserId()` in `UserShow`, the `$user` property is updated. Livewire is designed to handle this flow efficiently, but sometimes the automatic cascade of updates between deeply nested components requires explicit intervention. The core issue is ensuring that the data passed down (props) is not just updated internally in the parent, but is also explicitly re-evaluated by the child component's rendering cycle.
## Solution 1: Explicit Data Passing via Properties (The Recommended Approach)
The most idiomatic way to handle this within a Livewire context is to ensure the parent passes *all* necessary state data directly to the child upon rendering, and that any change in that state immediately triggers a re-render of the child.
In your specific case, since you are passing the `$user` object explicitly: `@livewire('user-show-email', ['user' => $user])`, Livewire *should* observe changes to `$user`. If it's not refreshing, we need to ensure the parent’s update is tightly coupled with the child’s rendering.
The key is often ensuring that the parent component itself re-renders after its state change. Since you are using