--- title: React - Best Practices | daily.dev description: In JavaScript, you can adopt ES6 syntax to make your code cleaner. Don't Forget key Prop With map in JSX Always assign a unique value to the prop to every JSX... canonical: https://daily.dev/posts/react---best-practices-2z3qjna8o twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: React - Best Practices | daily.dev og:description: In JavaScript, you can adopt ES6 syntax to make your code cleaner. Don't Forget key Prop With map in JSX Always assign a unique value to the prop to every JSX... og:url: https://daily.dev/posts/react---best-practices-2z3qjna8o og:image: https://api.daily.dev/og/posts/2Z3qJnA8o.png og:image:alt: React - Best Practices 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. # React - Best Practices **[Community Picks](https://daily.dev/sources/community)** · 5 min read · 347 upvotes · 30 comments ## Summary In JavaScript, you can adopt ES6 syntax to make your code cleaner. Don't Forget key Prop With map in JSX Always assign a unique value to the prop to every JSX element while mapping from an array. Use Ternary Operator instead of if/else if Statements makes your code bulky. ## 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. **@\_aleksandar370144868902** · 5 upvotes > In the section "Always Check null & undefined for Objects & Arrays" person.age is implied by a comment that will throw an error but accessing an unexisting property of the object returns undefined. You should rename a comment or use a different example. > > Also in the same section later on: > > oddNumbers.length ? oddNumbers.length : "Array is undefined" > > oddNumbers.length ?? "Array is undefined" > > both are incorrect because you are trying to access property of undefined and that will throw en error. You should use optional chaining on those two, like this: oddNumbers?.length ?? "Array is... **@tomanator** · 5 upvotes > Interesting... Stick to company best practices as some of these are not really best practices. More personal coding style than anything, although some are very good and should probably go without saying. Hence why you should stick to company standards. > > The don't use if/else is a bad example. What if you are checking the name of 5-10? What's wrong with a switch statement for your example? having a ternary operator that long becomes ugly fast. > > Also, removing event listeners in your useEffect. Why are you adding event listeners in a use effect? It is good practice to write a cleanup for your... **@fullstacker** · 2 upvotes > Thank you for sharing this article! > > Here are a few more best practices to consider: > > 1. Use PropTypes to define the types of props a component expects > 2. Use the functional component pattern unless you need state or lifecycle methods > 3. Use hooks for state management and other common features > 4. Use memoization to improve performance on complex components > 5. Use React.Fragment to wrap adjacent JSX elements without adding extra nodes to the DOM > 6. Use the React Developer Tools browser extension to inspect and debug your React components > 7. Keep your components small and modular, and avoid... **@star\_knight\_\_\_** · 2 upvotes > Many thanks for sharing. **@kusarion** · 2 upvotes > The double ternary in those "good" examples would not pass a PR 🤨 ## 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 --- Tags: [#react](https://daily.dev/tags/react), [#javascript](https://daily.dev/tags/javascript), [#angular](https://daily.dev/tags/angular) [View this post on daily.dev](https://daily.dev/posts/react---best-practices-2z3qjna8o) ```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":"React - Best Practices","url":"https://daily.dev/posts/react---best-practices-2z3qjna8o","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react---best-practices-2z3qjna8o"},"datePublished":"2022-11-21T11:20:14.254Z","dateModified":"2023-12-07T12:02:45.284Z","description":"In JavaScript, you can adopt ES6 syntax to make your code cleaner. Don't Forget key Prop With map in JSX Always assign a unique value to the prop to every JSX...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1af27654420166257fcf4c6f13fb50ea","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1af27654420166257fcf4c6f13fb50ea","isAccessibleForFree":true,"articleSection":"Community Picks","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":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":30,"discussionUrl":"https://daily.dev/posts/react---best-practices-2z3qjna8o","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":347},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":30}],"keywords":"react,javascript,angular","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"React - Best Practices"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/react---best-practices-2z3qjna8o","comment":[{"@type":"Comment","text":"In the section “Always Check null & undefined for Objects & Arrays” person.age is implied by a comment that will throw an error but accessing an unexisting property of the object returns undefined. You should rename a comment or use a different example.\nAlso in the same section later on:\noddNumbers.length ? oddNumbers.length : “Array is undefined”\noddNumbers.length ?? “Array is undefined”\nboth are incorrect because you are trying to access property of undefined and that will throw en error. You should use optional chaining on those two, like this: oddNumbers?.length ?? “Array is undefined”\nplease correct this :)","datePublished":"2022-11-22T08:39:30.168Z","dateModified":"2022-11-22T08:40:07.329Z","url":"https://daily.dev/posts/2Z3qJnA8o#c-tfUPzQ4Uy","author":{"@type":"Person","name":"Aleksandar","url":"https://daily.dev/_aleksandar370144868902","image":"https://media.daily.dev/image/upload/f_auto/v1626508690/avatars/XviAI-9sk"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Interesting… Stick to company best practices as some of these are not really best practices. More personal coding style than anything, although some are very good and should probably go without saying. Hence why you should stick to company standards.\nThe don’t use if/else is a bad example. What if you are checking the name of 5-10? What’s wrong with a switch statement for your example? having a ternary operator that long becomes ugly fast.\nAlso, removing event listeners in your useEffect. Why are you adding event listeners in a use effect? It is good practice to write a cleanup for your useEffect, especially when using timeouts or intervals, but you shouldn’t be adding event listeners directly to the DOM in the first place. The point directly above that is correct in that you should avoid DOM manipulation. But then your next example with useEffects manipulates the DOM.\nVery good points though, just the example could be better.\nOne point I would add (that is very common) is don’t over rely on useEffect. Ask yourself is it really needed or are their other hooks that might be better suited, such as useMemo or useCallback in some circumstances. For example, for expensive calculations, useEffect and useMemo will have the same behaviour but useEffect is causing twice as much rendering which is bad for performance. useMemo would be better as it doesn’t introduce unnecessary mutable state and has fewer moving parts.\nJust some food for thought :)","datePublished":"2022-11-24T16:22:51.687Z","url":"https://daily.dev/posts/2Z3qJnA8o#c-ux2nyRo8v","author":{"@type":"Person","name":"Sean Toman","url":"https://daily.dev/tomanator","image":"https://avatars.githubusercontent.com/u/23706349?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"Thank you for sharing this article!\nHere are a few more best practices to consider:\n\nUse PropTypes to define the types of props a component expects\nUse the functional component pattern unless you need state or lifecycle methods\nUse hooks for state management and other common features\nUse memoization to improve performance on complex components\nUse React.Fragment to wrap adjacent JSX elements without adding extra nodes to the DOM\nUse the React Developer Tools browser extension to inspect and debug your React components\nKeep your components small and modular, and avoid tight coupling between components\nUse the key prop to optimize rendering of lists\nUse the useEffect hook to handle side effects in functional components\nAvoid using index as a key in list components, and instead use a unique identifier for each list item.","datePublished":"2022-12-07T19:51:57.512Z","dateModified":"2022-12-07T19:53:15.289Z","url":"https://daily.dev/posts/2Z3qJnA8o#c-TgVeDSEkx","author":{"@type":"Person","name":"Fullstacker","url":"https://daily.dev/fullstacker","image":"https://lh3.googleusercontent.com/a/ALm5wu2JiRlRkxfh4XCJNiOPboZLjmBA2jpyVtK-KVgP=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Many thanks for sharing.","datePublished":"2022-11-22T06:53:52.795Z","url":"https://daily.dev/posts/2Z3qJnA8o#c-euDKZ_So1","author":{"@type":"Person","name":"StarKnight","url":"https://daily.dev/star_knight___","image":"https://avatars.githubusercontent.com/u/92244026?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"The double ternary in those “good” examples would not pass a PR 🤨","datePublished":"2022-11-24T08:36:04.048Z","url":"https://daily.dev/posts/2Z3qJnA8o#c-ns_44S8cy","author":{"@type":"Person","name":"Jacques Deschamps","url":"https://daily.dev/kusarion","image":"https://lh3.googleusercontent.com/a/ALm5wu1ix37KTqkwGP_60_AjjOcZ68KIm7S-01btMgjg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} ```