✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
DebounceInput
Reflex is a backend-centric framework, which can create negative performance impacts for apps that need to provide interactive feedback to the user in real time.
Using the
rx.debounce_input component allows the frontend to remain responsive while receiving user input and send the value to the backend after some delay, on blur, or when Enter is pressed.Typically, this component is used to wrap a child
rx.input or rx.text_area however, most child components that accept the value prop and on_change event handler can be used with rx.debounce_inputThis example only sends the final checkbox state to the backend after a 1 second delay.
Unchecked
class DebounceCheckboxState(rx.State):
checked: bool = False
def index():
return rx.hstack(
rx.cond(
DebounceCheckboxState.checked,
rx.text("Checked", color="green"),
rx.text("Unchecked", color="red"),
),
rx.debounce_input(
rx.checkbox(
on_change=DebounceCheckboxState.set_checked,
),
debounce_timeout=1000,
),
)DebounceInput
The DebounceInput component is used to buffer input events on the client side.
It is intended to wrap various form controls and should be used whenever a fully-controlled input is needed to prevent lost input data when the backend is experiencing high latency.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.