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

interrupt the rendering of react #15

Open
zhaozailin opened this issue Apr 30, 2024 · 3 comments
Open

interrupt the rendering of react #15

zhaozailin opened this issue Apr 30, 2024 · 3 comments
Labels
discussion Discussion

Comments

@zhaozailin
Copy link

This project is great, I would like to ask whether it can interrupt the rendering of react. For example, if there is a list of 10,000 length arrays and react updates this array when performing state updates, can it interrupt the rendering

@astoilkov astoilkov added the question Further information is requested label Apr 30, 2024
@astoilkov
Copy link
Owner

Hey, good question. I've been asked this before. Maybe I should add a FAQ section and include this question.

You can't interrupt the React rendering. However, you can:

  • use the new concurrent rendering features in React 18 — useDeferredValue(), startTransition(), and useTransition that can render without blocking the UI. React has their own scheduler that has similarities with what main-thread-scheduling is doing.
  • gradually render your results by calling setState() in React after each yieldOrContinue() call.

@kurtextrem
Copy link

gradually render your results by calling setState() in React after each yieldOrContinue() call.

However, this needs to be done carefully, because React is able to batch state updates. If done blindly, yielding after each setState might produce more re-renders than needed (= worse performance ultimately).

@astoilkov
Copy link
Owner

Ah, you are right. I've started writing an FAQ section with a more nuanced answer and information on the topic. Thanks!

@astoilkov astoilkov added discussion Discussion and removed question Further information is requested labels Jun 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion Discussion
Projects
None yet
Development

No branches or pull requests

3 participants