Auto-memoization splits local client-state button text from its setter

Aperta
  • Qualcosa non va?
#7,309 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
python, react
Ambito
frontend, full-stack

Direzione di ricerca

The issue is in the auto-memoization logic for local client state. Start by examining how rx._x.client_state generates React hooks and how child components are memoized. Look at the generated JavaScript to see the separate useState calls. The fix likely involves keeping the state reader and setter in the same React component scope. Test by running the provided reproduction script and checking the DOM updates.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

maybe-stale

Automatic memoization separates a local client state's reader and setter into different React state instances. A button that renders its own client-state value does not visibly update when clicked.

Reproduced on main commit 31d57490470228c08595e73bcae1f86703880e26 and on 565dd92bfbb26c86d064e7bebfaf47321414c7a0.

import reflex as rx

count = rx._x.client_state("local_count", default=0, global_ref=False)


def index():
    return rx.el.button(
        count.value,
        on_click=count.set_value(count.value + 1),
        id="counter",
    )


app = rx.App()
app.add_page(index)

Run the app, wait for hydration, and click the button. It keeps displaying 0; no browser error is reported. The expected text is 1, then 2 on the next click.

The generated Button memo has useState(0) and calls its own setter. Its text is rendered by a separate Bare memo with another useState(0). The setter therefore never updates the state that the text reads.

For comparison, rendering the value as an element prop keeps it in the same memo as the event handler and works:

rx.el.input(
    type="button",
    value=count.value,
    on_click=count.set_value(count.value + 1),
)

Validated both cases through real clicks and DOM assertions in Chrome. Please keep a local client-state read and its setter in the same hook scope when memoizing children.

Lingua principale
Python
Stelle
29k
Fork
1.8k
Merge medio
2g 22h
PR unite (30g)
143

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di reflex-dev/reflex

Tutte le issue di reflex-dev/reflex

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.