Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

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.

Unchecked

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

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

Minimum input characters before triggering the on_change event

debounce_timeoutint

Time to wait between end of input and triggering on_change

force_notify_by_enterbool

If true, notify when Enter key is pressed

force_notify_on_blurbool

If true, notify when form control loses focus

valuestr

If provided, create a fully-controlled input

input_refstr

The ref to attach to the created input

elementType

The element to wrap

Event Triggers

TriggerDescription
on_change

The on_change event handler is called when the value or checked state of the component changes.

← CheckboxEditor →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting