What’s Wrong With useEffect?

[00:00 - 00:20] Before we go ahead and start creating a performance data fetching solution for React, let's first talk about why I and many others including the React team don't recommend using the use effect hook for fetching data. Funnily enough, there was a time when the React team recommended use effect for fetching data.

[00:21 - 00:42] If we go to the legacy React documentation in the browser, we can scroll down towards the middle of the page and we can see down here that there's a what does use effect to and we can see on the last sentence that it specifies data fetching. So for a long time and even now, people use the use effect hook for fetching data.

[00:43 - 00:55] But we can see that in the new React documentation, they still talk about data fetching with the use effect hook, however, it's something that they no longer recommend. Let's take a look at the new React website in the browser.

[00:56 - 01:09] In the use effect section of the documentation, there is a data fetching section over here. If we click on this link, it will jump further down the page and we can see how the React team tells us to fetch data.

[01:10 - 01:33] But if you scroll down, beyond this point, we'll see that there's a section in purple, which says what are good alternatives to data fetching in effects. If you're curious and you click on the show details button, you can see here that the documentation says although fetching inside effects is a popular way to fetch data, this approach is very manual and has significant downsides.

[01:34 - 01:55] So here, the React team are not necessarily recommended it. Then beyond this point, it goes on to list the downside of using use effect, which include effect don't run on the server, that fetching in effects creates network water falls, that you can't preload and cache data with an effect and so on.

[01:56 - 02:03] Let's go back to the presentation. So these are the main downsides that the React team specifies when using the use effect hook for data fetching.

[02:04 - 02:35] The first one is not being rendered on the server and this means that all the JavaScript for your component will need to be loaded before the data fetching can start if use effect is used. Network waterfalls means that if you have nested components that need to fetch data, fetching will happen one after the other, meaning the deepest nested component will have to wait for the parent to start fetching data before it can start, which is really unnecessary if it doesn't depend on the parent's data in the first place.

[02:36 - 03:04] Next is no preloading or caching, which again means you can't start fetching data before the component is rendered and also if a user renders the same component multiple times, like a blog homepage for example, then the data will be fetched each and every time, which is really not needed if the data hasn't changed. Now there are way more downsides to using the use effect hook for data fetching , which we'll talk about in more detail later on in the course.

[03:05 - 03:17] But for now, let's highlight why this is more of an issue in React compared to other libraries and frameworks. React has a very specific way of updating and re-rendering components.

[03:18 - 03:38] Now the purpose of this video isn't to talk about the virtual DOM or how React renders, but I'm just going to explain a bit more about re-rendering to highlight why it 's such a bad idea to put data fetching in a use effect hook. So let's explain how React re-renders by using an example of buying a hot dog from a food stand.

[03:39 - 03:49] Let's imagine you were going to buy a hot dog from a food stand. The hot dog arrives and it doesn't have any condiments, but you later realize that you want some ketchup on your hot dog.

[03:50 - 04:00] So you tell the seller and what they do is they throw the old hot dog away so in the bin or in the trash and they give you a new one with ketchup on it. Nice!

[04:01 - 04:13] But then you realize you want some mustard. So you tell the seller and what they do, weirdly enough, is they grab the old hot dog with the ketchup and throw it in the bin and give you a new one with ketchup and mustard.

[04:14 - 04:19] Cool! But then you realize you want ketchup mustard and onions.

[04:20 - 04:34] So you tell the seller and what they do is they grab the old hot dog with k etchup and mustard and throw it in the bin and give you a brand new one with ketchup, mustard and onions. Now you have to admit that's a really odd way of doing things.

[04:35 - 04:41] Why not just add ketchup, mustard and onions to the hot dog you already have? This is how React works.

[04:42 - 05:05] Each time a component updates, it throws away the old component and creates a new one with the new update. Because a user effect will run after a component has updated and a component will update whenever a state, prop or parent component changes, you could get into a situation where you're fetching data multiple times unnecessarily and you could even cause an infinite loop.

[05:06 - 05:20] However, if you're more experienced with React, you'll know that this can be addressed with a dependency array or React's memo. But this doesn't fix all the issues and again we'll talk more about the issues later.

[05:21 - 05:29] So how does the React team suggest solving this? Well, they say user framework like Next.js, remix or Gatsby.

[05:30 - 05:46] Or if you want to fetch data for a client's side app, then use a library like T ansackQuery, use SWR or ReactRooter. Now these are really good alternatives but depending on what you're working on, you may not be able to use them.

[05:47 - 05:50] Let's talk about what these reasons might be in the next video.