--- title: Common Beginner Mistakes with React | daily.dev description: Explore common beginner mistakes with React and learn how to fix them. Topics include evaluating with zero, mutating state, not generating keys, missing... canonical: https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Common Beginner Mistakes with React | daily.dev og:description: Explore common beginner mistakes with React and learn how to fix them. Topics include evaluating with zero, mutating state, not generating keys, missing... og:url: https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v og:image: https://api.daily.dev/og/posts/4FaDfd07v.png og:image:alt: Common Beginner Mistakes with React 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. # Common Beginner Mistakes with React **[Josh W Comeau](https://daily.dev/sources/joshwcomeau)** · 28 min read · 169 upvotes · 6 comments ## Summary Explore common beginner mistakes with React and learn how to fix them. Topics include evaluating with zero, mutating state, not generating keys, missing whitespace, accessing state after changing it, returning multiple elements, missing style brackets, and using async functions in effects. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@aldennis** · 2 upvotes > This brings back the good old days when I wrote React with JavaScript. I didn't catch all of these because the last couple of years I have been using Typescript and WebStorm. IDE tools catches these for me now. If I have to go through an interview I will have to done up on these :) **@danoph** · 1 upvotes > Nice article! I've also seen the evaluating by zero in the wild on production apps! **@pirinsesa** · 0 upvotes > Very helpful! **@star\_knight\_\_\_** · 0 upvotes > It's really helpful; I'll take care of these points while I learn to "React". **@oceanestars** · 0 upvotes > Great article! Thank you for sharing Crypto, I had no idea this existed! > > Quick question, with controlled states on input I'll often have them be laggy due to function running and taking a while. Would using async with useEffect(or useMemo) on those heavy function help the controlled state be more "responsive"? ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v) ```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":"Common Beginner Mistakes with React","url":"https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v"},"datePublished":"2023-03-06T15:46:28.579Z","dateModified":"2024-04-15T12:54:02.600Z","description":"Explore common beginner mistakes with React and learn how to fix them. Topics include evaluating with zero, mutating state, not generating keys, missing...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/800afe7f5e16bf58756882e548bed8a4?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/800afe7f5e16bf58756882e548bed8a4?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Josh W Comeau","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":"Josh W Comeau","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/4a121572d03c40a2bff9e8ed0f0792b5","url":"https://daily.dev/sources/joshwcomeau"},"commentCount":6,"discussionUrl":"https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":169},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":6}],"keywords":"javascript,react","timeRequired":"PT28M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Josh W Comeau","item":"https://daily.dev/sources/joshwcomeau"},{"@type":"ListItem","position":3,"name":"Common Beginner Mistakes with React"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v","comment":[{"@type":"Comment","text":"This brings back the good old days when I wrote React with JavaScript. I didn’t catch all of these because the last couple of years I have been using Typescript and WebStorm. IDE tools catches these for me now. If I have to go through an interview I will have to done up on these :)","datePublished":"2023-03-06T23:12:30.878Z","url":"https://daily.dev/posts/4FaDfd07v#c-YLo3FfCHU","author":{"@type":"Person","name":"Al Dennis","url":"https://daily.dev/aldennis","image":"https://lh3.googleusercontent.com/a/AEdFTp7laNbtst3aEAemEHDc94c0pZaXcC9ycjXnIvg4=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Nice article! I’ve also seen the evaluating by zero in the wild on production apps!","datePublished":"2023-03-06T19:54:02.248Z","url":"https://daily.dev/posts/4FaDfd07v#c-rEeNyrs8f","author":{"@type":"Person","name":"Daniel Errante","url":"https://daily.dev/danoph","image":"https://avatars.githubusercontent.com/u/10590?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Very helpful!","datePublished":"2023-03-07T04:35:53.385Z","url":"https://daily.dev/posts/4FaDfd07v#c-JeHRT4QDm","author":{"@type":"Person","name":"Princess Santillan","url":"https://daily.dev/pirinsesa","image":"https://media.daily.dev/image/upload/v1678089761/avatars/avatar_keBdJfcjWPzhBCjJvYF9Z.jpg"}},{"@type":"Comment","text":"It’s really helpful; I’ll take care of these points while I learn to “React”.","datePublished":"2023-03-12T15:03:27.905Z","url":"https://daily.dev/posts/4FaDfd07v#c-auNOuMkv2","author":{"@type":"Person","name":"StarKnight","url":"https://daily.dev/star_knight___","image":"https://avatars.githubusercontent.com/u/92244026?v=4"}},{"@type":"Comment","text":"Great article! Thank you for sharing Crypto, I had no idea this existed!\nQuick question, with controlled states on input I’ll often have them be laggy due to function running and taking a while. Would using async with useEffect(or useMemo) on those heavy function help the controlled state be more “responsive”?","datePublished":"2023-03-13T04:45:52.931Z","url":"https://daily.dev/posts/4FaDfd07v#c-9ZaRYTKwh","author":{"@type":"Person","name":"Oceane","url":"https://daily.dev/oceanestars","image":"https://avatars.githubusercontent.com/u/28778891?v=4"}}]} ```