Props & data
Props Diffing
Only the changed path travels, unless a component opts out
- data-props-diff
- diff={false}
Key concepts
By default LiveReact sends only the part of a prop that changed, not the
whole value. Both components below share one large payload
assign; clicking the button changes a single field inside it. Only the
changed path travels to the diffed instance — the other resends the entire
payload on every update, because it opted out.
Each instance reports how many bytes actually changed on its wrapper element
for the last update, and the running total. The diffed instance receives a
small data-props-diff
patch; the other receives the whole data-props
payload again every time.
diff={true}
- counter
- 0
- last update
- waiting for the first update
- via
- —
- total received
- 0 bytes
diff={false}
- counter
- 0
- last update
- waiting for the first update
- via
- —
- total received
- 0 bytes
How it works
LiveReact writes data-use-diff
on the component's root element to say which mode it is in. When diffing is
on, prop changes are computed as a JSON Patch and written to data-props-diff; the client applies that patch to the props it
already has instead of receiving a new snapshot.
Diffing is on by default, controlled globally by config :live_react, :enable_props_diff. Pass
diff={false}
on a single <.react>
call to opt that instance out and always
send the full prop value — useful when a prop is small enough that diffing is
pure overhead, or when a component needs the complete value on every render.