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

Open
  • Is something wrong?
#7,309 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
python, react
Domain
frontend, full-stack

Research direction

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.

Written by the indexing model from the issue text.

Description

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.

Dominant language
Python
Stars
29k
Forks
1.8k
Avg merge
2d 22h
Merged PRs (30d)
143

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reflex-dev/reflex

All issues in reflex-dev/reflex

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.