--- title: I Built 18 React Projects So You Don’t Have to Guess... description: A structured list of 18 React projects organized by skill level (beginner, intermediate, advanced), each paired with the specific concept it teaches and the... canonical: https://daily.dev/posts/i-built-18-react-projects-so-you-don-t-have-to-guess-what-to-build-next-y2iscvzgg twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: I Built 18 React Projects So You Don’t Have to Guess What to Build Next | daily.dev og:description: A structured list of 18 React projects organized by skill level (beginner, intermediate, advanced), each paired with the specific concept it teaches and the... og:url: https://daily.dev/posts/i-built-18-react-projects-so-you-don-t-have-to-guess-what-to-build-next-y2iscvzgg og:image: https://api.daily.dev/og/posts/y2IScvZGg.png og:image:alt: I Built 18 React Projects So You Don’t Have to Guess What to Build Next og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # I Built 18 React Projects So You Don’t Have to Guess What to Build Next **[Medium](https://daily.dev/sources/medium_js)** · 6 min read · 1 upvotes · 0 comments ## Summary A structured list of 18 React projects organized by skill level (beginner, intermediate, advanced), each paired with the specific concept it teaches and the common mistake developers make when building it. Beginner projects cover useState, useContext, and controlled forms. Intermediate projects introduce useReducer, async data fetching, debouncing, and compound components. Advanced projects tackle drag-and-drop, virtualization, race conditions, recursive rendering, and custom caching hooks. The post also suggests combining projects into larger apps and provides a decision guide for picking the right starting point based on current weaknesses. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is the most common beginner mistake when building a React todo list app? The most common mistake is mutating an array in place instead of creating a new array when updating state. Because React relies on reference changes to detect updates, this bug fails silently rather than throwing an error, making it especially hard for beginners to catch when adding, completing, or deleting todo items. _Developers debugging silent state update issues in React can find practical breakdowns like this on daily.dev._ ### How do you avoid a race condition when building a typeahead search with request cancellation in React? Handle the case where an older, slower request resolves after a newer one and would otherwise overwrite fresh results with stale data. Typeahead search with request cancellation requires explicitly tracking which request is current, ignoring or cancelling responses from outdated requests so the UI only reflects the latest search input. _Anyone building async search UIs can track race-condition patterns like this via daily.dev._ ### Why doesn't memoization alone solve performance problems in a virtualized table with 10,000+ rows? Memoization only prevents re-rendering unchanged components, but it does not reduce the number of DOM nodes being rendered. A virtualized table for large datasets needs to render only the rows visible in the viewport plus a small buffer, fixing the root cause by cutting the DOM node count rather than making the same number of renders cheaper. _Developers optimizing large list rendering can compare virtualization approaches through daily.dev._ ## Similar posts on daily.dev - [React Folder Structure for Beginners: The Folder Organization That Finally Made Sense to Me](https://daily.dev/posts/react-folder-structure-for-beginners-the-folder-organization-that-finally-made-sense-to-me-uvkbilaco) · Medium · 276 upvotes · 23 comments - [The Only React Hooks Guide You’ll Actually Finish Reading.](https://daily.dev/posts/the-only-react-hooks-guide-you-ll-actually-finish-reading--kd819szsi) · Coins Bench · 188 upvotes · 7 comments - [Designers already think in React](https://daily.dev/posts/designers-already-think-in-react-rbce4lfse) · thoughbot · 6 upvotes · 1 comments - [35 React Interview Questions Senior Developers Still Get Wrong](https://daily.dev/posts/35-react-interview-questions-senior-developers-still-get-wrong-xt6j2vb4r) · JS Dev Space · 89 upvotes · 6 comments --- Tags: [#general-programming](https://daily.dev/tags/general-programming), [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/i-built-18-react-projects-so-you-don-t-have-to-guess-what-to-build-next-y2iscvzgg) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"I Built 18 React Projects So You Don’t Have to Guess What to Build Next","url":"https://daily.dev/posts/i-built-18-react-projects-so-you-don-t-have-to-guess-what-to-build-next-y2iscvzgg","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/i-built-18-react-projects-so-you-don-t-have-to-guess-what-to-build-next-y2iscvzgg"},"datePublished":"2026-07-24T12:07:59.139Z","dateModified":"2026-09-14T06:26:47.053Z","description":"A structured list of 18 React projects organized by skill level (beginner, intermediate, advanced), each paired with the specific concept it teaches and the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d6ab0a9a223ee01bc82d647f54feb2d2?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d6ab0a9a223ee01bc82d647f54feb2d2?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/i-built-18-react-projects-so-you-don-t-have-to-guess-what-to-build-next-y2iscvzgg","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"general-programming,javascript,react,frontend","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"I Built 18 React Projects So You Don’t Have to Guess What to Build Next"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/i-built-18-react-projects-so-you-don-t-have-to-guess-what-to-build-next-y2iscvzgg#faq","mainEntity":[{"@type":"Question","name":"What is the most common beginner mistake when building a React todo list app?","acceptedAnswer":{"@type":"Answer","text":"The most common mistake is mutating an array in place instead of creating a new array when updating state. Because React relies on reference changes to detect updates, this bug fails silently rather than throwing an error, making it especially hard for beginners to catch when adding, completing, or deleting todo items. Developers debugging silent state update issues in React can find practical breakdowns like this on daily.dev."}},{"@type":"Question","name":"How do you avoid a race condition when building a typeahead search with request cancellation in React?","acceptedAnswer":{"@type":"Answer","text":"Handle the case where an older, slower request resolves after a newer one and would otherwise overwrite fresh results with stale data. Typeahead search with request cancellation requires explicitly tracking which request is current, ignoring or cancelling responses from outdated requests so the UI only reflects the latest search input. Anyone building async search UIs can track race-condition patterns like this via daily.dev."}},{"@type":"Question","name":"Why doesn't memoization alone solve performance problems in a virtualized table with 10,000+ rows?","acceptedAnswer":{"@type":"Answer","text":"Memoization only prevents re-rendering unchanged components, but it does not reduce the number of DOM nodes being rendered. A virtualized table for large datasets needs to render only the rows visible in the viewport plus a small buffer, fixing the root cause by cutting the DOM node count rather than making the same number of renders cheaper. Developers optimizing large list rendering can compare virtualization approaches through daily.dev."}}]} ```