{"id":25539406,"url":"https://github.com/mesteche/react_stream","last_synced_at":"2026-02-01T22:30:14.819Z","repository":{"id":44126313,"uuid":"137128677","full_name":"mesteche/react_stream","owner":"mesteche","description":"sample demo app of react and async iterators","archived":false,"fork":false,"pushed_at":"2022-12-08T05:07:36.000Z","size":3298,"stargazers_count":2,"open_issues_count":22,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-19T13:45:42.864Z","etag":null,"topics":["async-iterators","functional-programming","react","stream"],"latest_commit_sha":null,"homepage":null,"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/mesteche.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-12T21:16:48.000Z","updated_at":"2020-08-17T15:53:17.000Z","dependencies_parsed_at":"2023-01-24T11:30:22.309Z","dependency_job_id":null,"html_url":"https://github.com/mesteche/react_stream","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/mesteche%2Freact_stream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mesteche%2Freact_stream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mesteche%2Freact_stream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mesteche%2Freact_stream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mesteche","download_url":"https://codeload.github.com/mesteche/react_stream/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239786162,"owners_count":19696770,"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":["async-iterators","functional-programming","react","stream"],"created_at":"2025-02-20T05:34:35.760Z","updated_at":"2026-02-01T22:30:14.756Z","avatar_url":"https://github.com/mesteche.png","language":"JavaScript","readme":"# react_stream\n\nsample demo app of react and async iterators\n\n## usage\n\nInstall the dependencies\n`npm install`\n\nRun the app\n`npm start`\n\nOpen your browser at: [http://localhost:3000/](http://localhost:3000/)\n\nNow try to edit src/index.js and comment the line 34:\n\n```js\nawait new Promise(requestAnimationFrame)\n```\n\nNow try commenting line 39:\n\n```js\ndebounce(idleIterator),\n```\n\n/!\\ This is only holds true because we are manually calling react's render method.\nIf you use react's internal setState (call it 600 times in a loop) or redux's dispatch (same thing), react will not render 600 times, or even 20 time but only once.\nThe lesson is : don't render manually, react is already perfomant.\n\n### What happened ?\n\nOn its own, react can manage to render 60fps on firefox, but it still renders each and every frames.\nIt means that if you have 600 updates of the state, react will take about 10 sec to get up to date with the last version.\n\nThe line 34 ensures that react won't try to render more than once per animation frame, so the rest of the app have more CPU time available.\n\nThe line 39 is the real magic.\nIt will only pass the last version of the state when requested.\nIf more updates are coming from the state, it will keep the last and drop the rest.\nSo that means that some updates won't be rendered.\nMost of them actually, it may render only 15 or 20 frames over 600, but it does so in a few hundred milliseconds, so it still is around 60fps.\n\nBut it doesn't matter since these updates are building on top of each other,\nthe last update is always the complete state up to date, and the last update is always rendered.\nAnd since we are rendering one time per frame, we are already rendering the maximum number of fps that the browser can display.\n\nAnother thing to notice: it will only try to get updates from the state if the app as nothing more important to do (is idle).\nSo it doesn't take precious CPU just to drop some state updates.\n\nIf you wonder how it works, look at the code in src/shared/stream/time.js\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmesteche%2Freact_stream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmesteche%2Freact_stream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmesteche%2Freact_stream/lists"}