{"id":21593601,"url":"https://github.com/firatgoktepe/data-structures-for-react","last_synced_at":"2026-04-11T11:02:17.207Z","repository":{"id":172298199,"uuid":"569722143","full_name":"firatgoktepe/Data-Structures-for-React","owner":"firatgoktepe","description":"Some real world examples about data structures commonly used for React","archived":false,"fork":false,"pushed_at":"2022-11-28T12:06:10.000Z","size":57,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-23T01:59:28.390Z","etag":null,"topics":["data-structures","javascript","react","vitejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firatgoktepe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-11-23T13:19:56.000Z","updated_at":"2022-11-23T13:38:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"b53f3b03-fbc6-4014-92ec-19d10abfbfc7","html_url":"https://github.com/firatgoktepe/Data-Structures-for-React","commit_stats":null,"previous_names":["firatgoktepe/data-structures-for-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/firatgoktepe/Data-Structures-for-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firatgoktepe%2FData-Structures-for-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firatgoktepe%2FData-Structures-for-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firatgoktepe%2FData-Structures-for-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firatgoktepe%2FData-Structures-for-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firatgoktepe","download_url":"https://codeload.github.com/firatgoktepe/Data-Structures-for-React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firatgoktepe%2FData-Structures-for-React/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31677819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["data-structures","javascript","react","vitejs"],"created_at":"2024-11-24T17:13:39.451Z","updated_at":"2026-04-11T11:02:17.188Z","avatar_url":"https://github.com/firatgoktepe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003eMost Common Data Structures for React\u003c/h2\u003e\n\n\u003ch3 align=\"center\"\u003eData Structures In Frontend JavaScript/React In The Real World\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n    Data structures can be intimidating. Especially for the self-taught \nfolks among us. If you already tried to study data structures in \nJavaScript/React you know what typically happens: \u003c/p\u003e\n\n- 🌎 A bunch of CS theory is thrown at you.\n- 🔭 You read pages of code that manually implement e.g. a linked list.\n- 📖 All the examples are abstract using \u003ci\u003efoo\u003c/i\u003e and \u003ci\u003ebar\u003c/i\u003e or \u003ci\u003ecats\u003c/i\u003e and \u003ci\u003edogs\u003c/i\u003e.\n\n\u003cp\u003eNow in this repo, you can find simple real world data structure\nexamples for React\u003c/p\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eTable of Contents\u003c/b\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ch3\u003e1. Set\u003c/h3\u003e\n    \u003cp\u003eA Set is a keyed collection as well that is natively supported \nin JavaScript. But while it’s easier to think of a Map as an object, a \nSet is more like an array. It’s important to note that each value in a \nSet is unique. You can’t add a value twice. That’s why you may see a \nSet used to remove duplicates from an array.\u003c/p\u003e\n     \u003cimg \nsrc=\"https://user-images.githubusercontent.com/47864126/203989055-2269a2e3-4f4e-4904-bcdb-0070c5921cc2.png\" \n/\u003e\t\n    \u003cp\u003eCompared to an array, the main advantage is that you can check \nif a Set contains a value in a performant way.\n\n\u003c/p\u003e\n     \u003ch3\u003eReal-World Example: Keeping track of selected items\u003c/h3\u003e\n     \u003cp\u003ehttps://user-images.githubusercontent.com/47864126/203786175-6ea6329f-99fe-4e90-b1de-e3dea5a6cc66.mov\u003c/p\u003e\n    \u003ch3\u003e2. Map\u003c/h3\u003e\n    \u003cp\u003eA (hash) map, hash table, or dictionary is basically a \nkey-value storage. In JavaScript we actually use this all the time. We \nalso have a native JavaScript alternative in form of a Map. It has a \nfew handy methods and properties (such as Map.size), is optimized \nperformance-wise for accessing values by key, and allows any kind of \ntype as keys (even objects).\n\nAnother advantage of the Map: with objects the keys are converted to \nstrings. A Map on the other hand preserves the original \ntype\u003c/p\u003e\n     \u003ch3\u003eReal-World Example: Messages with user names\u003c/h3\u003e\n     \n\u003cimg \nsrc=\"https://user-images.githubusercontent.com/47864126/203972864-fbb6be92-24f6-4251-ae45-846a151ee289.png\" \n/\u003e\n    \u003ch3\u003e3. Stack\u003c/h3\u003e\n    \u003cp\u003eA basic stack has two features:\n\nYou can add an item to the top of the stack.\nYou can remove an item from the top of the stack.\nThis is called “Last in, first out” (aka LIFO). Might sound \ncomplicated but we can implement it with a simple array (as it’s not \nnatively supported in JavaScript).\u003c/p\u003e\n     \u003cimg \nsrc=\"https://user-images.githubusercontent.com/47864126/203989292-3a4ae5c9-68d9-460f-886c-4980afd42ce4.png\" \n/\u003e\n     \u003ch3\u003eReal-World Example: Undo previous actions\u003c/h3\u003e\n\u003cp\u003ehttps://user-images.githubusercontent.com/47864126/203981727-ff28b357-bf2b-4939-b64f-21fab1043b07.mov\u003c/p\u003e\n    \u003ch3\u003e4. Queue\u003c/h3\u003e\n     \u003cp\u003eA queue is very similar to a stack. But instead of removing \nthe element that was added last, we remove the element that was first \nadded to the queue. This is called “First in, first out” (aka FIFO).\n\nLike a queue in the supermarket.\n\nWe can implement it again using a simple array as it's not natively \nsupported in JavaScript.\u003c/p\u003e\n     \u003cimg \nsrc=\"https://user-images.githubusercontent.com/47864126/203989460-5212e218-e4fe-41c5-8c0f-0b3648cd42d7.png\" \n/\u003e\n     \u003ch3\u003eReal-World Example: Notifications\u003c/h3\u003e\n\u003cp\u003ehttps://user-images.githubusercontent.com/47864126/203981735-a3d94dcb-9b0e-42f9-8fcb-0f4dbded129c.mov\u003c/p\u003e\n    \u003ch3\u003e5. Tree\u003c/h3\u003e\n   \u003cp\u003eA tree is a nested data structure. It starts with a parent that \nhas children. The children again can have children of their own and so \non. Together with trees you often find recursive functions.\n\nHere is one example using a nested object:\u003c/p\u003e\n\u003cimg \nsrc=\"https://user-images.githubusercontent.com/47864126/203989561-3c2f6118-044d-4a19-aabd-140a6fbc73bf.png\" \n/\u003e \n\u003ch3\u003eReal-World Example: Nested menus or comments\u003c/h3\u003e\n     \u003cimg \nsrc=\"https://user-images.githubusercontent.com/47864126/203981750-774a3a53-302f-4f29-a4c0-60e4bda97d93.png\" \n/\u003e \u003c/div\u003e\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiratgoktepe%2Fdata-structures-for-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiratgoktepe%2Fdata-structures-for-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiratgoktepe%2Fdata-structures-for-react/lists"}