{"id":15819685,"url":"https://github.com/florianrappl/react-concurrent-mode-example","last_synced_at":"2025-10-27T08:43:23.727Z","repository":{"id":147576594,"uuid":"254617473","full_name":"FlorianRappl/react-concurrent-mode-example","owner":"FlorianRappl","description":"One example where React concurrent mode excels in user experience. :atom:","archived":false,"fork":false,"pushed_at":"2020-04-10T11:29:08.000Z","size":71,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-06T06:42:32.587Z","etag":null,"topics":["concurrent","demo-app","example","react","spa","webdev"],"latest_commit_sha":null,"homepage":"https://piral.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FlorianRappl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["FlorianRappl"],"custom":["https://www.paypal.me/FlorianRappl"]}},"created_at":"2020-04-10T11:25:07.000Z","updated_at":"2021-11-25T19:07:13.000Z","dependencies_parsed_at":"2023-05-31T16:31:08.539Z","dependency_job_id":null,"html_url":"https://github.com/FlorianRappl/react-concurrent-mode-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Freact-concurrent-mode-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Freact-concurrent-mode-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Freact-concurrent-mode-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Freact-concurrent-mode-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlorianRappl","download_url":"https://codeload.github.com/FlorianRappl/react-concurrent-mode-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243663516,"owners_count":20327300,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["concurrent","demo-app","example","react","spa","webdev"],"created_at":"2024-10-05T06:42:37.894Z","updated_at":"2025-10-27T08:43:23.654Z","avatar_url":"https://github.com/FlorianRappl.png","language":"JavaScript","funding_links":["https://github.com/sponsors/FlorianRappl","https://www.paypal.me/FlorianRappl"],"categories":[],"sub_categories":[],"readme":"# React Concurrent Example\n\nThis 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.\n\n## General Info\n\nThe 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.\n\nThe 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.\n\n## Running\n\nTo run this example just clone the repository and execute:\n\n```js\nnpm i \u0026\u0026 npm start\n```\n\nThis will start the development server.\n\n## Legacy Mode\n\nTo enable the legacy mode you should change the contents of the `src/index.jsx` file.\n\nNotably, just change:\n\n```diff\n-const isLegacy = false;\n+const isLegacy = true;\n```\n\nYou will see the rendering actually blocking user interaction for a significant time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianrappl%2Freact-concurrent-mode-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorianrappl%2Freact-concurrent-mode-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianrappl%2Freact-concurrent-mode-example/lists"}