rx._x.client_state: react useState Var integration for frontend and backend

[masenf]

New experimental feature to create client-side react state vars, save them in the global refs object and access them in frontend rendering/event triggers as well on the backend via call_script.

A key difference in this implementation is the use of refs to avoid having to memoize components together in the same react function and to allow easy access to the browser state from the backend. This avoids some of the weirdness encountered with prior art: #2917 (comment)

Sample Code

import random

import reflex as rx


ClientSliderState = rx._x.client_state("slider_value", [0])


class State(rx.State):
    saved_value: list[int] = [50]

    def retrieve_callback(self, value: list[int]):
        self.saved_value = value
        return rx._x.toast.info(f"Saved value: {value[0]}")

    def save(self):
        return ClientSliderState.retrieve(
            callback=State.retrieve_callback,
        )

    def randomize(self):
        self.saved_value = [random.randint(0, 100)]
        return self.on_load()

    def on_load(self):
        return ClientSliderState.push(self.saved_value)


def index() -> rx.Component:
    return rx.container(
        ClientSliderState,  # Set up the client state in top-level component.
        rx.vstack(
            rx.heading("Welcome to Client Slider!", size="9"),
            rx.divider(margin_bottom="2em"),
            rx.hstack(
                rx.heading("Client Value: "),
                rx.spinner(
                    rx.heading(ClientSliderState.value[0]),
                    loading=~rx.State.is_hydrated,
                ),
                rx.spacer(),
                rx.heading("Server Value: "),
                rx.spinner(
                    rx.heading(State.saved_value[0]),
                    loading=~rx.State.is_hydrated,
                ),
            ),
            rx.slider(
                value=rx.cond(rx.State.is_hydrated, ClientSliderState.value, []),
                on_change=ClientSliderState.set,
            ),
            rx.hstack(
                rx.button("Save", on_click=State.save),
                rx.button("Randomize", on_click=State.randomize),
                justify="center",
            ),
            rx.logo(),
            rx._x.toast.provider(),
            spacing="5",
            align="center",
        ),
        padding_top="3em",
        height="100vh",
        stack_children_full_width=True,
    )


app = rx.App()
app.add_page(index, on_load=State.on_load)