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

Abierto
  • ¿Algo no está bien?
#7,309 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
python, react
Área
frontend, full-stack

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
Python
Estrellas
29k
Forks
1.8k
Merge medio
2 d 22 h
PR fusionados (30 d)
143

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de reflex-dev/reflex

Todos los issues de reflex-dev/reflex

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.