Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix flash of content on initialization #717

Merged
merged 2 commits into from
Mar 4, 2025

Conversation

colsondonohue
Copy link
Contributor

Does two things to eliminate the flash, when using the ReactCodeMirror component:

  1. Eliminate one initial re-render from calling setContainer in an effect when the container prop changes
  • previously, this resulted in setContainer(null) -> re-render -> setContainer(el) -> re-render -> [now component can initialize]
  • now, the first effect invocation no-ops, since the ref value is not truthy, then the second time no state is updated, since props.container is referentially equal to container, set by the ref callback when the div mounted
  1. Eliminate one paint by running initialization in a layout effect, which forces the second re-render to occur synchronously before paint

So the new set of render cycles on mount is:
mount -> setContainer in callback ref -> re-render -> layout effect to initialize editor state -> re-render -> paint

It won't eliminate flashing when users choose to use useCodeMirror directly, unless they are also calling setContainer in a callback ref on their parent element.

Ideally, I think useCodeMirror would not take a container prop at all, and would instead do all of the state/view initialization logic in setContainer, which would be a callback ref. However, this is a breaking change, and I don't want to remove all of the synchronization logic in effects which enables passing a different container.

@jaywcjlove jaywcjlove merged commit b11562d into uiwjs:master Mar 4, 2025
1 check passed
jaywcjlove added a commit that referenced this pull request Mar 4, 2025
github-actions bot pushed a commit that referenced this pull request Mar 4, 2025
* Fix flash on initialization

* Update example to remove state setting on load

---------

Co-authored-by: Colson Donohue <colsondonohue@Colsons-MBP.localdomain> b11562d
github-actions bot pushed a commit that referenced this pull request Mar 4, 2025
jaywcjlove added a commit that referenced this pull request Mar 4, 2025
github-actions bot pushed a commit that referenced this pull request Mar 4, 2025
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