--- title: Best React posts — March 2023 | daily.dev description: The most upvoted React posts from March 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/react/best-of/2023/03 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/react/best-of/2023/03 og:type: website og:site_name: daily.dev og:title: Best React posts — March 2023 | daily.dev og:description: The most upvoted React posts from March 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of React — March 2023 1. 1 [](/posts/solid-principles-in-reactjs-erquewmwk "SOLID principles in Reactjs") Article Dev Genius · 4y SOLID principles in Reactjs SOLID principles in ReactJS are a set of five principles aimed at making software design maintainable, scalable and easy to modify. These principles can be applied to any object-oriented programming language, including ReactJS. In this blog post, we’ll discuss the importance of the SOLID Principles in React JS and how they can improve your code. 220 9 2. 2 [](/posts/introducing-react-dev-react-msdb96wt7 "Introducing react.dev – React") Article Hacker News · 4y Introducing react.dev – React Introducing react.dev, the new home for React and its documentation. The new site teaches modern React with function components and Hooks. It includes diagrams, illustrations, challenges, and over 600 new interactive examples. The previous React documentation site has now moved to legacy.reactjs.org. 174 10 3. 3 [](/posts/common-beginner-mistakes-with-react-4fadfd07v "Common Beginner Mistakes with React") Article Josh W Comeau · 4y Common Beginner Mistakes with React 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. 169 6 4. 4 [](/posts/float-ui---product-information-latest-updates-and-reviews-2024-w9su4nfxp "Float UI - Product Information, Latest Updates, and Reviews 2024") Article Product Hunt · 4y Float UI - Product Information, Latest Updates, and Reviews 2024 Float UI is an open-source library of high-quality UI components and customizable templates built on top of Tailwind CSS and modern JS frameworks. It recently launched Float UI v2 and is looking for expert tips and contributions. 118 12 5. 5 [](/posts/rethinking-react-best-practices-gaewcf8ty "Rethinking React best practices") Article Community Picks · 4y Rethinking React best practices This post explores the evolution of React and its transition from a client-only paradigm to incorporating server components. It discusses the core constraints, addresses people and technical problems, and delves into the optimizations applied to the client-only paradigm. The post highlights the importance of understanding the abstractions and making informed tradeoffs. 97 14 6. 6 [](/posts/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app--gwbdvjymw "What is Vite and Why Should You Use It Instead of Create React App?") Article Community Picks · 4y What is Vite and Why Should You Use It Instead of Create React App? Vite is a tool that addresses the issues with Create React App, providing faster development and build times by not rebuilding the whole app whenever changes are made. 93 4 7. 7 [](/posts/how-to-build-react-applications-faster-with-bun-p0fydksa3 "How to build React applications faster with Bun") Article asayer · 4y How to build React applications faster with Bun Learn how to build React applications faster using the Bun JavaScript runtime. Discover the advantages of Bun, its speed and performance, and how to install it. Explore how to set up a React application with Bun and use it as a package manager. Test the speed of creating a React app with Bun compared to create-react-app. 91 3 8. 8 [](/posts/next-js-themes-ohmx686yc "Next JS Themes") Article Community Picks · 4y Next JS Themes This post presents a curated list of open-source Next JS themes available for download from Github. Next JS is a full-stack framework built on top of React.js used for building static sites, APIs, and full-stack applications. 85 16 9. 9 [](/posts/how-to-start-a-react-project-in-2024-waqtmxe7g "How to start a React Project in 2024") Article Robin Wieruch · 4y How to start a React Project in 2024 Learn about how to start a React project using different frameworks and rendering techniques like Vite, Next.js, and Astro. Understand the advantages and disadvantages of each approach. 67 9 10. 10 [](/posts/horizon-ui---product-information-latest-updates-and-reviews-2024-h1lhgo2w1 "Horizon UI - Product Information, Latest Updates, and Reviews 2024") Article Product Hunt · 4y Horizon UI - Product Information, Latest Updates, and Reviews 2024 Horizon UI is an Open Source Admin Template for Chakra UI & React. It offers recent launches tailored for Tailwind CSS and TypeScript. Users can leave reviews and share pro tips. 58 2 11. 11 [](/posts/understanding-service-workers-in-react-js-zhbg0hwab "Understanding Service Workers in React JS") Article Community Picks · 4y Understanding Service Workers in React JS Learn about service workers in React JS, how they boost website performance, and their lifecycle. 55 3 12. 12 [](/posts/how-to-optimize-your-react-app-s-performance-sujut9wpa "How To Optimize Your React App’s Performance") Article DEV · 4y How To Optimize Your React App’s Performance This post provides optimization techniques for improving React app performance, including using browser performance tools, lazy loading components with React.Suspense and React.Lazy, memoizing components with React.memo, and tree shaking. It also discusses optimizing images for better performance. 53 1 13. 13 [](/posts/what-is-strict-mode-in-react--dkdopwgko "What is Strict Mode in React?") Article Community Picks · 4y What is Strict Mode in React? Strict mode in React is a set of development tools for catching potential problems in code before they become bugs. It enables extra checks and warnings and helps developers write better code. Strict mode affects only the development environment and can help catch subtle bugs, keep up with best practices, and identify unsafe lifecycles. 46 3 14. 14 [](/posts/create-your-own-openai-powered-chatbot-in-react-within-30-minutes--yd8r7xex2 "Create Your Own OpenAI Powered Chatbot in React within 30 minutes.") Article ITNEXT · 4y Create Your Own OpenAI Powered Chatbot in React within 30 minutes. Learn how to build an OpenAI powered chatbot in React by following simple steps. Get an API key from OpenAI, create a React application, and prepare the necessary parameters for the HTTP call. Build a basic user interface to interact with the chatbot. 45 3 15. 15 [](/posts/learn-react-18-with-redux-toolkit-aqfljfc8c "Learn React 18 with Redux Toolkit") Article freeCodeCamp · 4y Learn React 18 with Redux Toolkit Learn React 18 with Redux Toolkit through a comprehensive video course on the freeCodeCamp.org YouTube channel. The course covers React development, folder structure, components, props, events, forms, hooks, context API, performance, and Redux Toolkit. 44 4 16. 16 [](/posts/best-text-editors-for-react-7uphpkdcv "Best text editors for React") Article LogRocket · 4y Best text editors for React Explore a list of the best text editors for React, including TinyMCE, Quill, CKEditor 5, Lexical, Tiptap, ProseMirror, Slate, and Editor.js. Each text editor has its own set of features, pros, and cons, allowing you to choose the one that best fits your project. 44 11 17. 17 [](/posts/million-js-v2-0-0---product-information-latest-updates-and-reviews-2024-urlgl7wfj "Million.js v2.0.0 - Product Information, Latest Updates, and Reviews 2024") Article Product Hunt · 4y Million.js v2.0.0 - Product Information, Latest Updates, and Reviews 2024 Million.js v2.0.0 is an extremely fast and lightweight virtual DOM that makes React up to 70% faster. It offers faster rendering and loading speeds, making user interface creation easier with the speed of raw JavaScript. 43 3 18. 18 [](/posts/a-visual-guide-to-useeffect---cleanups-bmfvkbgoy "A Visual Guide to useEffect - Cleanups") Article Community Picks · 4y A Visual Guide to useEffect - Cleanups This post discusses how to prevent effects from running after a component unmounts, how to ensure that only the last interval is kept, and when to use cleanups in useEffect. 36 6 19. 19 [](/posts/code-splitting-in-react-js-iy8u8toxn "Code splitting in React JS") Article Community Picks · 4y Code splitting in React JS Learn how to improve the loading speed of React JS applications by using code splitting. Code splitting involves separating code into smaller packages or components that can be loaded on demand or in parallel, resulting in faster website loading times, improved user interaction, and reduced abandonment rates. Follow the step-by-step guide to apply code splitting in a React JS project using React.lazy and Suspense. 36 3 20. 20 [](/posts/take-your-code-to-the-other-side-f4clipovp "Take Your Code to The Other Side") Article Community Picks · 4y Take Your Code to The Other Side Learn about the art of code refactoring and how it can revolutionize your codebase. Discover the benefits of improved code quality, increased maintainability, better performance, and easier collaboration. Explore techniques such as code formatting, avoiding extra wrapping divs in React, using meaningful naming conventions, removing unnecessary comments, destructuring props, organizing imports, splitting code into smaller functions, practicing code reusability, optimizing render performance, reducing bundle size, caching expensive calculations, and eliminating excessive if-else conditions. Embrace the process of code refactoring and watch your application reach new heights. 36 4 21. 21 [](/posts/awesome-ui-interactions-with-scroll-reveal-rrvqn0bdx "Awesome UI Interactions with Scroll Reveal") Article asayer · 4y Awesome UI Interactions with Scroll Reveal Learn about web animations, micro interactions, and how to add Scroll Reveal animations to your React application for a better user experience. 35 2 22. 22 [](/posts/how-to-build-forms-in-react-wd3hmfrq8 "How to Build Forms in React") Article freeCodeCamp · 4y How to Build Forms in React Learn how to build forms in React using controlled and uncontrolled components. Understand the difference between the two approaches and explore form validation using libraries like React Hook Form. 33 3 23. 23 [](/posts/how-to-be-better-in-react-code-reusability-part2-v2upbrcgr "How to be Better in React Code Reusability – Part2") Article Community Picks · 4y How to be Better in React Code Reusability – Part2 This post explores the best practices for achieving optimal code reusability in React. It covers steps for creating reusable components, challenges faced by React developers, and best practices for managing dependencies. The key steps discussed include keeping components small and function-specific, using higher-order components (HOC), using render props, using context, and using React hooks. 31 13 24. 24 [](/posts/introducing-the-issues-calendar-for-github-projects-ggbrsswov "Introducing the Issues Calendar for GitHub Projects") Article PlanetScale · 4y Introducing the Issues Calendar for GitHub Projects Introducing the Issues Calendar for GitHub Projects, an open-source tool that allows users to view GitHub project issues in a customizable calendar. The tool integrates with GitHub's OAuth system, allowing users to sign in with their existing credentials and import projects they have access to. Any issue with a due date assigned will be displayed on the calendar. 29 3 25. 25 [](/posts/full-stack-typescript-with-trpc-and-react-2hiogplwd "Full-Stack TypeScript with tRPC and React") Article Robin Wieruch · 4y Full-Stack TypeScript with tRPC and React tRPC allows developers to create fully type safe APIs with TypeScript in full-stack applications. It provides type safe functions for client applications, without the need for schemas or code generation. The post provides a tutorial on creating a CRUD application with tRPC, Node, Express, and React. It also discusses integrating tRPC with React Query for data fetching. 29 3 [See all React archives](/tags/react/best-of) ```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","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/react/best-of/2023/03#page","url":"https://daily.dev/tags/react/best-of/2023/03","name":"Best React Posts — March 2023","description":"The most upvoted React posts from March 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/react/best-of/2023/03#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/solid-principles-in-reactjs-erquewmwk","name":"SOLID principles in Reactjs"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/introducing-react-dev-react-msdb96wt7","name":"Introducing react.dev – React"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/common-beginner-mistakes-with-react-4fadfd07v","name":"Common Beginner Mistakes with React"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/float-ui---product-information-latest-updates-and-reviews-2024-w9su4nfxp","name":"Float UI - Product Information, Latest Updates, and Reviews 2024"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/rethinking-react-best-practices-gaewcf8ty","name":"Rethinking React best practices"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app--gwbdvjymw","name":"What is Vite and Why Should You Use It Instead of Create React App?"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-build-react-applications-faster-with-bun-p0fydksa3","name":"How to build React applications faster with Bun"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/next-js-themes-ohmx686yc","name":"Next JS Themes"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-to-start-a-react-project-in-2024-waqtmxe7g","name":"How to start a React Project in 2024"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/horizon-ui---product-information-latest-updates-and-reviews-2024-h1lhgo2w1","name":"Horizon UI - Product Information, Latest Updates, and Reviews 2024"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/understanding-service-workers-in-react-js-zhbg0hwab","name":"Understanding Service Workers in React JS"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-to-optimize-your-react-app-s-performance-sujut9wpa","name":"How To Optimize Your React App’s Performance"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/what-is-strict-mode-in-react--dkdopwgko","name":"What is Strict Mode in React?"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/create-your-own-openai-powered-chatbot-in-react-within-30-minutes--yd8r7xex2","name":"Create Your Own OpenAI Powered Chatbot in React within 30 minutes."},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/learn-react-18-with-redux-toolkit-aqfljfc8c","name":"Learn React 18 with Redux Toolkit"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/best-text-editors-for-react-7uphpkdcv","name":"Best text editors for React"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/million-js-v2-0-0---product-information-latest-updates-and-reviews-2024-urlgl7wfj","name":"Million.js v2.0.0 - Product Information, Latest Updates, and Reviews 2024"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/a-visual-guide-to-useeffect---cleanups-bmfvkbgoy","name":"A Visual Guide to useEffect - Cleanups"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/code-splitting-in-react-js-iy8u8toxn","name":"Code splitting in React JS"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/take-your-code-to-the-other-side-f4clipovp","name":"Take Your Code to The Other Side"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/awesome-ui-interactions-with-scroll-reveal-rrvqn0bdx","name":"Awesome UI Interactions with Scroll Reveal"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/how-to-build-forms-in-react-wd3hmfrq8","name":"How to Build Forms in React"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-to-be-better-in-react-code-reusability-part2-v2upbrcgr","name":"How to be Better in React Code Reusability – Part2"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/introducing-the-issues-calendar-for-github-projects-ggbrsswov","name":"Introducing the Issues Calendar for GitHub Projects"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/full-stack-typescript-with-trpc-and-react-2hiogplwd","name":"Full-Stack TypeScript with tRPC and React"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"React","item":"https://daily.dev/tags/react"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/react/best-of"},{"@type":"ListItem","position":5,"name":"March 2023"}]}]} ```