docs: events, storage, and component field notes#6779
Conversation
Keyboard event triggers (on_key_down/on_key_up) and global hotkeys via rx.window_event_listener (previously undocumented), memo-with-foreach patterns, enter_key_submit with its on_key_down conflict, set_clipboard with state vars, backend rx.download, on_load loading/error handling, and a local-storage positional-default note. Three stale knowledge-base claims were verified against source and rejected rather than upstreamed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Merging this PR will not alter performance
Comparing 
Footnotes
|
Greptile SummaryThis PR upstreams documentation from Reflex Build's AI-builder knowledge base, filling gaps across six doc files covering keyboard event triggers, memoized components with
Confidence Score: 4/5Five of the six files are accurate, well-verified additions; the memo.md change documents a deprecated pattern as if it is recommended. The docs/library/other/memo.md — the new Important Files Changed
Reviews (1): Last reviewed commit: "docs: events, storage, and component fie..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| lambda and pass the props by keyword. Also pass a `key` prop that uniquely | ||
| identifies each item — React uses it to track items across re-renders — but do | ||
| **not** declare `key` in the memo function's signature. It is forwarded | ||
| automatically and consumed by React. | ||
|
|
||
| ```python | ||
| from typing import TypedDict | ||
|
|
||
|
|
||
| class Task(TypedDict): | ||
| id: str | ||
| name: str | ||
|
|
||
|
|
||
| class TaskState(rx.State): | ||
| tasks: list[Task] = [ | ||
| {"id": "1", "name": "Write docs"}, | ||
| {"id": "2", "name": "Review PR"}, | ||
| ] | ||
|
|
||
|
|
||
| @rx.memo | ||
| def task_card(task: rx.Var[Task]) -> rx.Component: | ||
| return rx.card(rx.text(task["name"])) | ||
|
|
||
|
|
||
| def index(): | ||
| return rx.vstack( | ||
| rx.foreach( | ||
| TaskState.tasks, | ||
| lambda task: task_card(task=task, key=task["id"]), | ||
| ), | ||
| ) | ||
| ``` |
There was a problem hiding this comment.
key forwarding pattern documented as recommended
The example passes key=task["id"] to task_card which has no rx.RestProp parameter. In packages/reflex-base/src/reflex_base/components/memo.py (lines 1630–1643), this path hits _warn_legacy_base_props, emitting a console.deprecate call with deprecation_version="0.9.3" and removal_version="1.0". The deprecation message explicitly tells users to "Declare an rx.RestProp parameter to keep passing base props like key". Any user who follows this doc example as written will see a deprecation warning on every render, and the pattern will stop working entirely in 1.0.
The example should add rest: rx.RestProp to task_card's signature so the key is forwarded through the ...rest spread without triggering the warning, or at minimum include a note that this usage is deprecated and show the rx.RestProp alternative.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 96b2fe3316
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
|
|
||
| @rx.memo | ||
| def task_card(task: rx.Var[Task]) -> rx.Component: |
There was a problem hiding this comment.
When users copy this rx.foreach example, the later key=... is passed to a memo that has no rx.RestProp. The runtime explicitly treats that as legacy and calls _warn_legacy_base_props when rest_param is None (packages/reflex-base/src/reflex_base/components/memo.py:1630-1643), with the deprecation message saying to declare rx.RestProp for base props (packages/reflex-base/src/reflex_base/components/memo.py:1869-1878). This doc therefore recommends a pattern that immediately emits a deprecation warning and is scheduled for removal; include and pass a RestProp while still not declaring key as an explicit prop, or call out the warning.
Useful? React with 👍 / 👎.
| The `enter_key_submit` prop is implemented with its own key down handler, so | ||
| passing both to the same component raises an error. If custom key handling is | ||
| needed, implement the Enter-to-submit behavior in your own `on_key_down` | ||
| handler instead. |
There was a problem hiding this comment.
In the case where a textarea also needs custom key handling, this fallback tells users to implement the Enter-submit behavior with a normal Reflex on_key_down, but the built-in implementation needs the raw JS event to call e.preventDefault() and e.target.form.requestSubmit() (packages/reflex-components-core/src/reflex_components_core/el/elements/forms.py:870-877), while the public key event only sends the key and modifier Vars to state handlers (packages/reflex-base/src/reflex_base/event/__init__.py:1028-1045). Following this advice still lets Enter insert a newline, and using .prevent_default would suppress all key input rather than only Enter, so the docs should point to a custom JS custom_attrs handler or another supported pattern.
Useful? React with 👍 / 👎.
1 participant
Fourth batch of upstreaming Reflex Build's AI-builder knowledge base (#6775, #6777, and the recharts batch). Events/storage/component gaps:
on_key_down/on_key_upsections (keyboard triggers were previously undocumented) and a Global Keyboard Events section forrx.window_event_listener(also undocumented)rx.foreach(lambda + keyword args; thekeyprop forwarding — verified againstreflex_basesource)enter_key_submit, Shift+Enter behavior, and a verified warning that it can't be combined withon_key_down— raises ValueError)set_clipboardwith state Vars, backendrx.download(data=...)example,auto_scrollcross-linkNotably, three knowledge-base claims were checked against source and rejected rather than upstreamed (
rx.get_clipboarddoesn't exist;.temporaldoesn't guarantee ordering;syncisn't default-on). Pre-commit clean.🤖 Generated with Claude Code