React is a popular JavaScript library for building user interfaces, and its ecosystem is constantly evolving. To help you stay up-to-date with the latest developments in React and its ecosystem, I have curated a list of some of the must-read articles in 2024. These articles cover a wide range of topics, from React best practices and performance optimization to React ecosystem and a lot more. Whether you are a beginner or an experienced React developer, these resources can help you gain a deeper understanding of React and its ecosystem. Here is the list: ✨
🚀 The Interactive Guide to Rendering in React
🔗 Link
🔖 Difficulty level - Intermediate
This article delves into the concept of rendering in React, explaining when and how React updates the view. It provides a simple mental model for understanding how React works and aims to clarify common misconceptions about rendering in React.
🚀 React JS Best Practices From The New Docs
🔗 Link
🔖 Difficulty level - Intermediate, Expert
This article presents best practices for React development based on the new React documentation. It is intended to be read sequentially and covers various aspects of React, making it suitable for experienced and intermediate React developers.
🚀 Index as a Key is an Anti-Pattern
🔗 Link
🔖 Difficulty level - Beginner
This article discusses the use of index as a key in React and why it is an anti-pattern. It explains how using the index as a key can lead to issues when updating or deleting items in a list and provides alternative solutions for assigning keys to list items.
🚀 A Cure for React useState Hell?
🔗 Link
🔖 Difficulty level - Intermediate
The article discusses the challenges of managing state in React using the useState hook and proposes using the useReducer hook as a solution. It highlights the limitations of useState in managing complex state and provides an example of using useReducer to address these limitations.
🚀 Setup ESLint with React
🔗 Link
🔖 Difficulty level - Intermediate
The article provides a comprehensive guide on using ESLint with React, offering insights into how to set up and use ESLint effectively in a React project. It covers best practices and common configurations for ESLint in React development.
🚀 Automatic Batching in React 18: What You Should Know
🔗 Link
🔖 Difficulty level - Intermediate
This article explains the new feature of automatic batching in React 18, which batches state updates invoked from any location by default. It provides a simple example to understand how automatic batching works and how it can improve the performance of React applications. The difficulty level of this article is intermediate.
🚀 Advanced React Component Composition Guide
🔗 Link
🔖 Difficulty level - Intermediate
This article is a comprehensive guide to advanced React component composition, covering various techniques for composing components and managing state in complex React applications. It provides practical examples and best practices for building reusable and maintainable React components. The difficulty level of this article is intermediate to expert.
🚀 Fantastic Closures
🔗 Link
🔖 Difficulty level - Intermediate, Expert
This article explains the concept of closures in JavaScript and how they can be used in React to manage state and handle events. It provides examples of using closures to create reusable components and discusses the benefits and drawbacks of using closures in React.
🚀 Full-Stack TypeScript with tRPC and React
🔗 Link
🔖 Difficulty level - Intermediate
This article provides a guide to implementing tRPC (a TypeScript framework for building APIs) in a React/TypeScript application. It covers the installation of tRPC client and server dependencies and explains the specific implementation for the frontend project.
🚀 Rethinking React Best Practices
🔗 Link
🔖 Difficulty level - Intermediate, Expert
The article discusses the evolution of React best practices, particularly in the context of React 18 and React Server Components (RSCs). It explores the core constraints of React, past approaches to managing them, and the changing mental models found in React frameworks like Remix and Next.js.
🚀 React Performance
🔗 Link
🔖 Difficulty level - Intermediate, Expert
This article discusses various techniques for improving the performance of React applications, including optimizing rendering, reducing bundle size, and using React.memo and useMemo hooks. It provides practical examples and best practices for improving the performance of React applications.
🚀 Facts Around Next Image
🔗 Link
🔖 Difficulty level - Intermediate
This article presents various insights and details about the Next.js Image component, covering aspects that developers might not be aware of. It provides practical information about using Next.js Image and its features, making it useful for developers working with Next.js.
🚀 Building a Chat: Browser Notifications with React, WebSockets, and Web Push
🔗 Link
🔖 Difficulty level - Intermediate
The article offers a comprehensive guide to building a chat application with browser notifications using React, WebSockets, and Web Push. It provides insights into the integration of these technologies and offers a practical approach to implementing chat and notifications in a web application.
🚀 How To Build and Deploy a ChatGPT Clone Application With React and OpenAI API
🔗 Link
🔖 Difficulty level - Intermediate
This article provides a step-by-step guide to building and deploying a ChatGPT clone application using React and the OpenAI API. It covers the installation of dependencies, building the frontend, and deploying the application to Kinsta's Application Hosting platform.
🚀 A Historical Reference of React Criticism
🔗 Link
🔖 Difficulty level - Intermediate, Expert
This article provides a historical reference of criticism against React, covering various concerns and criticisms raised by developers and experts over the years. It explores the limitations and drawbacks of React and provides insights into the evolution of React as a framework.
In conclusion, the curated selection of the "15 Best Articles Around React in 2024" serves as a comprehensive guide for developers eager to navigate the ever-evolving landscape of React development. These articles, handpicked for their relevance, depth, and insights, offer a roadmap to mastering React in the current year. By delving into these resources, developers can stay at the forefront of the React ecosystem, empowering themselves with the knowledge and skills needed to build cutting-edge web applications.
About Me
Hey I am Dhruv Kothari 👋
A full-stack web developer and UI/UX enthusiast who currently works as a software engineer at Upraised. I am also a competitive programmer, and a sub-50 cuber, philatelist, and numismatist. You can reach out to me on GitHub and Twitter
Top comments (18)
OR, switch to another framework and you'll have to read much less to achieve the same, sometimes even more.
And stop reading React related articles ;o)
Which framework are you thinking of?
Svelte.
What´s the big advantage of Svelte in comparison to React?
You're welcome to investigate, but in a nutshell it runs much faster, its bundle is much smaller, it can be learned in one day if you already know a state-driven framework (all of it, no kidding), comes with scoped CSS, animations and designed for asynchronous programming.
That sounds really good. I should take a look at it. How comes, that the commonness of React is much higher then?
Svelte was born in 2016 in a digital newspaper (New York Times?), while React was born in 2010, I think, and with silver spoon in its mouth: Daddy was Facebook.
That´s the only reason in your opinion?
Thank you! 🙏
In my opinion, the cure for React useState hell, is to never use React as a state manager for non-UI states.
If that loading state you have is coupled to an API request, that should not be in your component. Same for that boolean state used to hide a section of your amazing form.
Use something else. Even pure JS classes + signals as primitives will be better than coupling any non-UI state to a component.
You can check this article too: ghazikhan.in/blog/react-reconcilia....
Mastering React's Reconciliation: Elevating Performance and User Experience
The covert photo says “…in 2023”. Mightn't you fix that? But otherwise great article!
Wow, what an incredible roundup! 🚀 Each of these articles seems like a React goldmine, and I can't wait to dive into them.
Nice one !!
Thanks
Each of these articles is a gold mine. Thank you very much!
?? Broken link.
Amazing Thread!! 👌🏻