Course Introduction

Introduction to React Data Fetching Course

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
Next LessonWhat’s Wrong With useEffect?
  • |

Lesson Transcript

  • [00:00 - 00:05] Welcome to this course on performance data fetching in React. My name is Richard Oliver-Bray.

  • [00:06 - 00:22] I'm a developer and content creator at Ulva Studio, and I'll be your instructor for this course. I've been using React for a long time now, and I've noticed that as it's grown in popularity, people have found issues with the way it works, particularly around data fetching.

  • [00:23 - 00:35] Most developers do data fetching with the use effect hook, but the React documentation outlines a bunch of issues with that approach. Instead, it recommends using a framework or a data fetching library.

  • [00:36 - 00:43] But what if you want to fetch data before-mentally without using a third-party library? If you're thinking that, then this is the course for you.

  • [00:44 - 01:03] I've done a lot of research and looked into the best ways to fetch data without using a library, or even the use effect hook, and I have some good news. This is definitely something that can be achieved in around 100 lines of code, and in this course, I'll show you exactly how to do it.

  • [01:04 - 01:23] We're going to go through the many problems with the use effect hook when it comes to data fetching, such as caching, network waterfalls, race conditions, and much more. We'll write the code step by step to solve each and every one of those issues using some clever JS data patterns and techniques.

  • [01:24 - 01:40] We'll also look into how we react to re-renders and optimize our data fetching code to re-render the least amount of times. By the end of this course, you'll be able to fetch data performantly without the use of a third-party library or even the use effect hook.

  • [01:41 - 01:49] You'll also have a piece of code that you can customize to your needs and use in your future projects. This course is split into five different modules.

  • [01:50 - 02:01] The first, we'll talk about the problems with use effect, data fetching libraries and frameworks. The second, we'll talk about pre-vexing and data caching and we'll actually implement them in code.

  • [02:02 - 02:13] Then we'll talk about race conditions and network waterfalls, which will also implement. The fourth, we'll talk about caching techniques and specifically one called stale while re-validate.

  • [02:14 - 02:24] And the final module, so the fifth one, will talk a bit about reactor of components and how we're gonna do data fetching inside them. Whew, that's a lot.

  • [02:25 - 02:42] If you have any questions or need clarification on any parts of the course, feel free to reach out to me in the new line Discord server or send me a DM on all of our social media. TikTok, Instagram, YouTube, you name it, I'm there and I'm happy to answer your questions.

  • [02:43 - 02:54] I'm super confident that you're going to learn a lot from this course and your future React projects will definitely thank you for this. Okay, with that out of the way, let's get started.