--- title: Best React posts — May 2024 | daily.dev description: The most upvoted React posts from May 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/react/best-of/2024/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/react/best-of/2024/05 og:type: website og:site_name: daily.dev og:title: Best React posts — May 2024 | daily.dev og:description: The most upvoted React posts from May 2024, 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 — May 2024 1. 1 [](https://daily.dev/posts/frontend-resources--j6qhjcy5k "Frontend resources! 🚀") Article Community Picks · 2y Frontend resources! 🚀 A collection of frontend resources for UI creation, performance optimization, and more. 975 35 2. 2 [](https://daily.dev/posts/open-source-react-ui-avatar-library-vnnz831k7 "Open Source React UI Avatar Library") Article Community Picks · 2y Open Source React UI Avatar Library Open Source React UI Avatar Library providing placeholder avatars with unique colors and shapes. Easy to install and use in React components. Customizable avatars. 548 22 3. 3 [](https://daily.dev/posts/15-crazy-new-js-framework-features-you-don-t-know-yet-6batjoo1r "15 crazy new JS framework features you don’t know yet") Video Fireship · 2y 15 crazy new JS framework features you don’t know yet Discover 15 new and awesome JavaScript framework features, including React 19's new compiler feature, Next.js 15's partial pre-rendering, and the new package manager called jsr. 529 24 4. 4 [](https://daily.dev/posts/headless-ui-v2-0-for-react-cg9stnset "Headless UI v2.0 for React") Article tailwindcss · 2y Headless UI v2.0 for React Headless UI v2.0 for React has been released with built-in anchor positioning, a new checkbox component, HTML form components, improved hover, focus and active state detection, combobox list virtualization, and a new website with improved documentation. 389 13 5. 5 [](https://daily.dev/posts/react-19-lets-you-write-impossible-components-odsyaery1 "React 19 lets you write impossible components") Article Community Picks · 2y React 19 lets you write impossible components React 19 introduces Server Components that allow developers to choose where their code runs, fetch data directly within components, and improve performance. Actions, on the other hand, provide convenient features like isPending state, error handling, and optimistic UI. These new features make it easier to build marketing websites and enhance the developer experience in React 19. 371 17 6. 6 [](https://daily.dev/posts/next-js-15-rc-jyvvk4yte "Next.js 15 RC") Article Next.js · 2y Next.js 15 RC Next.js 15 RC is now available, allowing you to test the latest features before the stable release. It includes support for React 19 RC, caching updates, incremental adoption of Partial Prerendering, executing code after a response, create-next-app updates, and optimizing bundling of external packages. 370 14 7. 7 [](https://daily.dev/posts/how-to-use-react-developer-tools-explained-with-examples-jj64byq29 "How to Use React Developer Tools – Explained With Examples") Article freeCodeCamp · 2y How to Use React Developer Tools – Explained With Examples Learn how to use React Developer Tools to inspect and debug React applications efficiently. Install the extension, navigate the interface, and explore component state and props. Debug errors and analyze performance using React DevTools. 301 7 8. 8 [](https://daily.dev/posts/how-to-start-setup-a-react-project-in-2024-7-different-ways-based-on-use-cases--jgudupppp "How to Start & Setup a React project in 2024 (7 Different Ways Based on Use Cases)") Article Community Picks · 2y How to Start & Setup a React project in 2024 (7 Different Ways Based on Use Cases) Learn about different ways to set up a React project in 2024, including React with Vite, Create React App, Next.js, Remix, Astro, Gatsby, and Docusaurus. 225 11 9. 9 [](https://daily.dev/posts/timepicker-fgq7h5pja "TimePicker") Article Community Picks · 2y TimePicker The TimePicker component is a React component built with Shadcn UI that allows for easy time selection. It supports features such as arrow navigation, date value formatting, and mobile keyboard optimization. 225 15 10. 10 [](https://daily.dev/posts/introducing-divz---a-react-component-to-scroll-swipe-zoom-through-html-content-on-the-3d-z-axis-1yrmrnscn "Introducing DIVZ - a React component to scroll, swipe & zoom through HTML content on the 3D z-axis") Article DEV · 2y Introducing DIVZ - a React component to scroll, swipe & zoom through HTML content on the 3D z-axis DIVZ is a free open source React UI component that enables scrolling, swiping, and zooming through HTML elements on the 3D z-axis. It offers simplified integration, diverse applications, and broad device support. 222 5 11. 11 [](https://daily.dev/posts/build-your-own-react-js-in-400-lines-of-code-az4zaasxk "Build Your Own React.js in 400 Lines of Code") Article DEV · 2y Build Your Own React.js in 400 Lines of Code Learn how React works under the hood and build your own version with about 400 lines of code. Supports asynchronous updates and can be interrupted. 214 5 12. 12 [](https://daily.dev/posts/it-s-not-just-you-next-js-is-getting-harder-to-use-g9eaukjmn "It’s not just you, Next.js is getting harder to use") Article DEV · 2y It’s not just you, Next.js is getting harder to use Next.js' App Router has two major problems that make it difficult to adopt. The Pages Router was simpler and had file-based routing. The App Router introduced new features but also increased complexity. It's challenging to avoid complexity as frameworks grow. Just because something is recommended, doesn't mean it's right for you. 183 29 13. 13 [](https://daily.dev/posts/best-headless-cms-for-react-in-2024-2cxsjxmta "Best Headless CMS for React in 2024") Article Community Picks · 2y Best Headless CMS for React in 2024 A headless CMS is a backend-only CMS that allows developers to use their tools and frameworks to create a user interface. React remains a cornerstone for building dynamic and scalable applications. Here are the top headless CMS options for React: Sanity.io, Storyblok, Contentful, Strapi, Prismic, Ghost, Kentico Kontent, Hygraph (formerly GraphCMS), ButterCMS, Directus, and Payload CMS. 167 24 14. 14 [](https://daily.dev/posts/react-context-api-explained-with-examples-dmwk72cz5 "React Context API Explained with Examples") Article freeCodeCamp · 2y React Context API Explained with Examples Learn about the React Context API, which simplifies state management and sharing data across components in a React application 163 5 15. 15 [](https://daily.dev/posts/write-components-once-run-everywhere--iazzt8gkv "Write components once, run everywhere.") Article Community Picks · 2y Write components once, run everywhere. Code examples demonstrate how to write components that can run natively in multiple frameworks. 164 4 16. 16 [](https://daily.dev/posts/react-19-new-features-optimizations-and-improvements-pzl4n8krf "React 19: New Features, Optimizations, and Improvements") Article Collections · 2y React 19: New Features, Optimizations, and Improvements React 19 introduces automatic memoization for improved performance, streamlined form handling, simplified ref handling, and advancements in document metadata management. The beta release provides resources for library developers and includes tools for migration. 160 5 17. 17 [](https://daily.dev/posts/how-to-generate-pdfs-in-a-react-app-ysbnvqiyv "How to Generate PDFs in a React App") Article asayer · 2y How to Generate PDFs in a React App Learn how to generate PDFs in a React app using the React-pdf library. Discover the use cases, features, and installation process of React-pdf. 142 2 18. 18 [](https://daily.dev/posts/how-to-create-a-rest-api-without-a-server-moekqersz "How to Create a REST API Without a Server") Article freeCodeCamp · 2y How to Create a REST API Without a Server Learn how to create a REST API without a server using a Service Worker in the browser. Showcase your frontend skills and interact with a backend hosted in places where you can't access the server side. 136 19. 19 [](https://daily.dev/posts/answers-to-common-next-js-questions-fr7mzge5i "Answers to Common Next.js Questions") Article Community Picks · 2y Answers to Common Next.js Questions Next.js is a high performance framework that provides a FAQ with common questions about Next.js and its Server Components. 130 3 20. 20 [](https://daily.dev/posts/demystifying-react-s-types-ref-types-gigwmjfom "⚛️ Demystifying React's Types: Ref types") Article DEV · 2y ⚛️ Demystifying React's Types: Ref types This post explores the different types of refs available in TypeScript-based functional components in React and how to use them. 123 1 21. 21 [](https://daily.dev/posts/zustand-vs-usestate-how-to-manage-state-in-react-apps-m471fity3 "Zustand vs useState – How to Manage State in React Apps") Article freeCodeCamp · 2y Zustand vs useState – How to Manage State in React Apps Learn about Zustand and useState as tools for managing state in React. Zustand offers more centralized global state management, while useState is simpler for local component state. Consider factors like state complexity, speed, team skills, app growth, and community support when choosing between them. 116 21 22. 22 [](https://daily.dev/posts/hevar-awesome-react-tailwindcss-ui-components-zqhmstqhr "hevar/awesome-react-tailwindcss-ui-components") Article Community Picks · 2y hevar/awesome-react-tailwindcss-ui-components A curated list of React Tailwind CSS user interface component libraries that are open-source and have a Tailwind CSS UI component library for React. 116 6 23. 23 [](https://daily.dev/posts/100k-remote-dev-jobs-only-iyi760ewj "$100K+ Remote Dev Jobs Only") Article Hacker News · 2y $100K+ Remote Dev Jobs Only $100K+ remote developer jobs with various technologies and companies. 114 8 24. 24 [](https://daily.dev/posts/next-js-view-transitions-9mtqposql "Next.js View Transitions") Article Community Picks · 2y Next.js View Transitions Learn how to use the View Transitions API in Next.js App Router and the next-view-transitions package to enhance your app's routing. 109 7 25. 25 [](https://daily.dev/posts/server-action-with-tanstack-query-in-next-js-explained-xnquxjjs4 "Server Action with TanStack Query in Next.JS Explained") Article Community Picks · 2y Server Action with TanStack Query in Next.JS Explained Learn how to use Server Actions with TanStack Query in Next.JS to fetch and mutate data in your application. 106 [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/2024/05#page","url":"https://daily.dev/tags/react/best-of/2024/05","name":"Best React Posts — May 2024","description":"The most upvoted React posts from May 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/react/best-of/2024/05#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/frontend-resources--j6qhjcy5k","name":"Frontend resources! 🚀"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/open-source-react-ui-avatar-library-vnnz831k7","name":"Open Source React UI Avatar Library"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/15-crazy-new-js-framework-features-you-don-t-know-yet-6batjoo1r","name":"15 crazy new JS framework features you don’t know yet"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/headless-ui-v2-0-for-react-cg9stnset","name":"Headless UI v2.0 for React"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/react-19-lets-you-write-impossible-components-odsyaery1","name":"React 19 lets you write impossible components"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/next-js-15-rc-jyvvk4yte","name":"Next.js 15 RC"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-use-react-developer-tools-explained-with-examples-jj64byq29","name":"How to Use React Developer Tools – Explained With Examples"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-start-setup-a-react-project-in-2024-7-different-ways-based-on-use-cases--jgudupppp","name":"How to Start & Setup a React project in 2024 (7 Different Ways Based on Use Cases)"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/timepicker-fgq7h5pja","name":"TimePicker"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/introducing-divz---a-react-component-to-scroll-swipe-zoom-through-html-content-on-the-3d-z-axis-1yrmrnscn","name":"Introducing DIVZ - a React component to scroll, swipe & zoom through HTML content on the 3D z-axis"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/build-your-own-react-js-in-400-lines-of-code-az4zaasxk","name":"Build Your Own React.js in 400 Lines of Code"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/it-s-not-just-you-next-js-is-getting-harder-to-use-g9eaukjmn","name":"It’s not just you, Next.js is getting harder to use"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/best-headless-cms-for-react-in-2024-2cxsjxmta","name":"Best Headless CMS for React in 2024"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/react-context-api-explained-with-examples-dmwk72cz5","name":"React Context API Explained with Examples"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/write-components-once-run-everywhere--iazzt8gkv","name":"Write components once, run everywhere."},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/react-19-new-features-optimizations-and-improvements-pzl4n8krf","name":"React 19: New Features, Optimizations, and Improvements"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/how-to-generate-pdfs-in-a-react-app-ysbnvqiyv","name":"How to Generate PDFs in a React App"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-create-a-rest-api-without-a-server-moekqersz","name":"How to Create a REST API Without a Server"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/answers-to-common-next-js-questions-fr7mzge5i","name":"Answers to Common Next.js Questions"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/demystifying-react-s-types-ref-types-gigwmjfom","name":"⚛️ Demystifying React's Types: Ref types"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/zustand-vs-usestate-how-to-manage-state-in-react-apps-m471fity3","name":"Zustand vs useState – How to Manage State in React Apps"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/hevar-awesome-react-tailwindcss-ui-components-zqhmstqhr","name":"hevar/awesome-react-tailwindcss-ui-components"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/100k-remote-dev-jobs-only-iyi760ewj","name":"$100K+ Remote Dev Jobs Only"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/next-js-view-transitions-9mtqposql","name":"Next.js View Transitions"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/server-action-with-tanstack-query-in-next-js-explained-xnquxjjs4","name":"Server Action with TanStack Query in Next.JS Explained"}]},{"@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":"May 2024"}]}]} ```