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.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.

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,
        ),
    )

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.