39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
---
|
|
components:
|
|
- rx.debounce_input
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Debounce
|
|
|
|
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. For example, if a search bar sends a request to the backend on every keystroke, it may result in a laggy UI. This is because the backend is doing a lot of work to process each keystroke, and the frontend is waiting for the backend to respond before updating the UI.
|
|
|
|
Using the `rx.debounce_input` component allows the frontend to remain responsive while receiving user input and sends 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.chakra.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_input`."
|
|
|
|
This example only sends the final checkbox state to the backend after a 1 second delay.
|
|
|
|
```python demo exec
|
|
class DebounceCheckboxState(rx.State):
|
|
checked: bool = False
|
|
|
|
def debounce_checkbox_example():
|
|
return rx.hstack(
|
|
rx.cond(
|
|
DebounceCheckboxState.checked,
|
|
rx.text("Checked", color="green"),
|
|
rx.text("Unchecked", color="red"),
|
|
),
|
|
rx.debounce_input(
|
|
rx.chakra.checkbox(
|
|
on_change=DebounceCheckboxState.set_checked,
|
|
),
|
|
debounce_timeout=1000,
|
|
),
|
|
)
|
|
```
|