DEV Community

Cover image for The Ultimate React Reading List: Top 15 Must-Read Articles in 2024
Dhruv Kothari
Dhruv Kothari

Posted on • Updated on

The Ultimate React Reading List: Top 15 Must-Read Articles in 2024

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

The Interactive Guide to Rendering in React

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

React JS Best Practices From The New Docs

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

A Cure for React useState Hell?

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

Image description

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

Image description

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

Fantastic Closures

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

TypeScript with tRPC and React

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

Rethinking React Best Practices

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

React Performance

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

Image description

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

Image description

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

Image description

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

Image description

Top comments (19)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

OR, switch to another framework and you'll have to read much less to achieve the same, sometimes even more.

Collapse
 
elsyng profile image
Ellis

And stop reading React related articles ;o)

Collapse
 
christophcodes profile image
Christoph

Which framework are you thinking of?

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Svelte.

Thread Thread
 
christophcodes profile image
Christoph

What´s the big advantage of Svelte in comparison to React?

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

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.

Thread Thread
 
christophcodes profile image
Christoph

That sounds really good. I should take a look at it. How comes, that the commonness of React is much higher then?

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

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.

Thread Thread
 
christophcodes profile image
Christoph

That´s the only reason in your opinion?

Collapse
 
pavelee profile image
Paweł Ciosek

Thank you! 🙏

Collapse
 
samuelthng profile image
Sam

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.

Collapse
 
gkhan205 profile image
Ghazi Khan

You can check this article too: ghazikhan.in/blog/react-reconcilia....

Mastering React's Reconciliation: Elevating Performance and User Experience

Collapse
 
best_codes profile image
Best Codes

The covert photo says “…in 2023”. Mightn't you fix that? But otherwise great article!

Collapse
 
akashsalvi profile image
Akash Salvi

Wow, what an incredible roundup! 🚀 Each of these articles seems like a React goldmine, and I can't wait to dive into them.

Collapse
 
paloclanweb profile image
Gilberto Palomeque

Each of these articles is a gold mine. Thank you very much!

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

?? Broken link.

Collapse
 
yogini16 profile image
yogini16

Nice one !!
Thanks

Collapse
 
samprati97 profile image
Samprati Kothari

Amazing Thread!! 👌🏻