Skip to content

add rx memo marker to memo fields#5709

Merged
adhami3310 merged 2 commits intomainfrom
khaleel/eng-7320-rxmemo-with-arguments-that-shadow-js-keywords-does-not-work
Aug 13, 2025
Merged

add rx memo marker to memo fields#5709
adhami3310 merged 2 commits intomainfrom
khaleel/eng-7320-rxmemo-with-arguments-that-shadow-js-keywords-does-not-work

Conversation

@adhami3310
Copy link
Member

No description provided.

@linear
Copy link

linear bot commented Aug 13, 2025

@codspeed-hq
Copy link

codspeed-hq bot commented Aug 13, 2025

CodSpeed Performance Report

Merging #5709 will not alter performance

Comparing khaleel/eng-7320-rxmemo-with-arguments-that-shadow-js-keywords-does-not-work (f10e241) with main (9b2d93e)

Summary

✅ 8 untouched benchmarks

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Greptile Summary

This PR introduces a memo marker system to fix an issue where memoized components with arguments that shadow JavaScript keywords would fail to work properly. The changes add a new constant MEMO_MARKER with value '_rx_memo_' and systematically append this marker to all prop names in memoized components.

The core problem being solved is that when Reflex converts Python component prop names to JavaScript camelCase (e.g., for React components), prop names like 'class', 'default', 'for', 'function', etc. remain as JavaScript reserved words and cause syntax errors in the generated code. By appending the memo marker, these problematic names become safe variants (e.g., 'class' → 'classRxMemo', 'default' → 'defaultRxMemo').

The implementation involves:

  1. Adding the MEMO_MARKER constant to reflex/constants/state.py following the established pattern of FIELD_MARKER
  2. Modifying CustomComponent._post_init in reflex/components/component.py to append the marker when creating event triggers and processing camel-cased prop names for memoized components
  3. Updating test files to reflect the new expected behavior where memoized component props have the 'RxMemo' suffix

This change integrates cleanly with the existing component system's marker-based approach for distinguishing different types of component properties during code generation. The marker helps the compiler identify and handle memoized arguments correctly while ensuring JavaScript keyword conflicts are avoided.

Confidence score: 4/5

  • This PR addresses a specific JavaScript keyword conflict issue with a targeted solution that follows established patterns in the codebase
  • Score reflects solid implementation but potential edge cases around complex prop handling and the systematic nature of the string appending approach
  • Pay close attention to the component.py changes in CustomComponent._post_init method where the marker logic is implemented

4 files reviewed, no comments

Edit Code Review Bot Settings | Greptile

@adhami3310 adhami3310 merged commit 38e1efc into main Aug 13, 2025
41 checks passed
@adhami3310 adhami3310 deleted the khaleel/eng-7320-rxmemo-with-arguments-that-shadow-js-keywords-does-not-work branch August 13, 2025 19:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants