https://github.com/florianrappl/react-concurrent-mode-example
One example where React concurrent mode excels in user experience. :atom:
https://github.com/florianrappl/react-concurrent-mode-example
concurrent demo-app example react spa webdev
Last synced: 3 months ago
JSON representation
One example where React concurrent mode excels in user experience. :atom:
- Host: GitHub
- URL: https://github.com/florianrappl/react-concurrent-mode-example
- Owner: FlorianRappl
- License: mit
- Created: 2020-04-10T11:25:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-10T11:29:08.000Z (almost 6 years ago)
- Last Synced: 2024-10-06T06:42:32.587Z (over 1 year ago)
- Topics: concurrent, demo-app, example, react, spa, webdev
- Language: JavaScript
- Homepage: https://piral.io
- Size: 69.3 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Concurrent Example
This simple app loads (way too many) pseudo photos via the JSON PlaceHolder API. While this all seems rather smooth and nicely working out in React using the concurrent mode, the normal blocking mode has some problems.
## General Info
The simple example is of artificial nature. Obviously, you should not load 5k items from a remote source. Things like infinite scroll, pagination, or in general virtualization would be much better. Nevertheless, the 5k items are still a good representation of many problems we face in larger (React) applications.
The demonstration works with the current (April 2020) available implementation of React's novel concurrent mode. Changes here are expected, in which case the demonstration will mostly stop working.
## Running
To run this example just clone the repository and execute:
```js
npm i && npm start
```
This will start the development server.
## Legacy Mode
To enable the legacy mode you should change the contents of the `src/index.jsx` file.
Notably, just change:
```diff
-const isLegacy = false;
+const isLegacy = true;
```
You will see the rendering actually blocking user interaction for a significant time.