How NOT to Fetch Data in React | Lecture 139 | React.JS 🔥

Summary

The script discusses the incorrect way of loading data into a React application, which serves as a valuable learning experience. It demonstrates the pitfalls of updating state within the render logic, leading to an infinite loop of state setting and component re-rendering. By breaking this rule intentionally, the instructor aims to reinforce React's best practices and the importance of separating side effects from the render logic. The script walks through fetching movie data from an API and showcases the consequences of setting state directly, resulting in excessive API requests and potential errors. Ultimately, it sets the stage for introducing the useEffect hook as the correct solution in the subsequent lecture.

Takeaways

• 🚫 Never update state in React's render logic (code at the top level of the component function), as it can cause an infinite re-rendering loop.
• 👥 Breaking rules intentionally can be an effective way to learn React and its principles better.
• 🌐 The script demonstrates fetching data from an external API (OMDb) and handling the asynchronous response.
• 🔑 When using external APIs, it is best practice to store the API key in a separate variable outside the component function.
• ♻️ Setting state in the render logic causes the component to re-render, which in turn re-executes the render logic, leading to an infinite loop.
• 🕰️ Updating state with an empty array or directly setting watched triggered the 'too many re-renders' error due to the infinite loop.
• 🎣 The useEffect hook is introduced as the solution to handle side effects like data fetching correctly in React components.
• 📖 For those unfamiliar with asynchronous JavaScript and the fetch API, the script recommends reviewing the relevant sections from earlier in the course.
• 🔁 Each time a component re-renders, the entire function (render logic) is executed again, including any variable definitions within it.
• 🧠 Defining variables that don't depend on component state or props outside the component function is a good practice to avoid unnecessary re-computations.

Q & A

What is the purpose of this lecture?

The purpose of this lecture is to demonstrate the improper way of fetching data in a React application and then introduce the correct approach using the useEffect hook, which will be covered in the next lecture.

Why is it considered wrong to update state in render logic?

Updating state in render logic introduces a side effect, which is an interaction with the outside world. React's render logic should be free of side effects to prevent infinite re-rendering loops and maintain the application's stability.

What happens when state is set within the top-level code of the component function?

Setting state within the top-level code of the component function triggers an infinite loop of state updates and re-renders. This is because updating the state causes the component to re-render, which in turn re-executes the top-level code, leading to an endless cycle.

How is the OMDb API used in this example?

The OMDb API is used to fetch movie data based on a search query. The instructor demonstrates how to construct the API request URL, obtain an API key, and make the fetch request using the Fetch API in JavaScript.

Why is it recommended to define variables outside the component function?

Variables that do not depend on anything inside the component should be defined outside the component function. This is because the entire function is re-executed during each render, and defining variables inside would lead to unnecessary re-creation of those variables.

What is the purpose of the `.then()` method used with the `fetch` function?

The `.then()` method is used to handle the promise returned by the `fetch` function. It allows you to access the response data and perform additional operations, such as converting the response to JSON format.

Why does the instructor suggest breaking rules in this lecture?

The instructor suggests breaking the rule of not updating state in render logic as a learning experience. By intentionally violating this rule, students can better understand why the rule exists and the consequences of breaking it.

What is the potential issue with making multiple fetch requests in quick succession?

Making multiple fetch requests in quick succession can lead to excessive network traffic, performance degradation, and potential API rate limiting issues. It's generally advisable to implement appropriate throttling or caching mechanisms to avoid overloading the API with requests.

What is the significance of the 'too many re-renders' error mentioned in the lecture?

The 'too many re-renders' error is a warning from React indicating that the component is entering an infinite loop of re-rendering, which can lead to performance issues and potential crashes. This error is triggered when state updates are occurring in an uncontrolled manner within the render logic.

What is the solution proposed to address the issue of updating state in render logic?

The solution proposed is to use the useEffect hook, which will be covered in the next lecture. The useEffect hook allows developers to perform side effects, such as data fetching, in a controlled and predictable manner, preventing the infinite re-rendering loop.

Outlines

00:00

🔑 Setting Up Data Fetching in React the Wrong Way

The paragraph explains how to fetch movie data from the OMDb API using the fetch function in React. It involves getting an API key, constructing the API URL with the movie query, and making the fetch request inside the component's render logic. However, it warns that fetching data and setting state in the render logic is considered the wrong approach and will lead to an infinite loop of re-renders, causing performance issues.

05:01

⚠️ Consequences of Setting State in Render Logic

This paragraph demonstrates the problems that arise when state is set in the render logic of a React component. It shows that setting state in the top-level code of the component function leads to an infinite loop, causing the component to re-render continuously. This results in an excessive number of API requests and, in some cases, React's 'too many re-renders' error. The paragraph emphasizes that setting state in render logic should be avoided, and the use of the useEffect hook is recommended as the correct approach, which will be covered in the next lecture.

Keywords

💡Data Fetching

Data fetching refers to the process of retrieving data from an external source or API. In the context of the video, data fetching is demonstrated by using the fetch API to retrieve movie data from the OMDb API. This is a crucial concept as it showcases how to integrate external data into a React application, a common requirement for most modern web applications.

💡Side Effects

Side effects are operations that interact with or modify something outside the scope of the current function. In React, side effects include data fetching, subscriptions, manually changing the DOM, and using timers. The video emphasizes that side effects should not be present in the render logic of a React component, as they can lead to unintended consequences and render issues. Instead, side effects should be handled using React's useEffect hook.

💡Render Logic

Render logic refers to the code that is executed when a React component is rendered or re-rendered. In the video, the code at the top level of the component function is considered render logic, as it runs during the initial render and subsequent re-renders. The video demonstrates that introducing side effects like data fetching in the render logic can cause issues like infinite loops and excessive re-renders.

💡State Management

State management is the process of managing and updating the state of a React component. In the video, the concept of state management is explored by attempting to update the component's state with the fetched movie data. However, updating state in the render logic leads to an infinite loop, as setting state triggers a re-render, which in turn executes the render logic again, leading to an infinite cycle of state updates and re-renders.

💡useEffect Hook

The useEffect hook is a built-in React hook that allows developers to perform side effects in functional components. It is mentioned in the video as the solution to handle side effects like data fetching correctly, without introducing issues like infinite loops or excessive re-renders. The useEffect hook allows developers to perform side effects and clean up after them, ensuring that the render logic remains pure and free of side effects.

💡API Key

An API key is a unique identifier used to authenticate and authorize access to an API. In the video, the process of obtaining an API key from the OMDb API is demonstrated. API keys are commonly required when working with third-party APIs, as they help control access, track usage, and ensure that only authorized applications can access the API's data.

💡Promises

Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. In the video, the fetch API returns a Promise, which is then handled using the .then() method to access the response data. Understanding Promises is essential when working with asynchronous operations like data fetching, as they provide a structured way to handle the asynchronous flow of data.

💡Asynchronous JavaScript

Asynchronous JavaScript refers to the ability of JavaScript to handle non-blocking operations, allowing the program to continue executing without waiting for a specific task to complete. In the video, data fetching is an asynchronous operation, as the application does not need to wait for the data to be retrieved before continuing to run. The video mentions that understanding asynchronous JavaScript concepts is crucial when working with data fetching and handling Promises.

💡Infinite Loop

An infinite loop is a programming construct that repeats an operation indefinitely, without an exit condition. In the video, updating the component's state within the render logic leads to an infinite loop, as each state update triggers a re-render, which in turn updates the state again, creating an endless cycle of state updates and re-renders. This concept is used to illustrate the importance of avoiding side effects in the render logic and properly managing state updates.

💡Network Tab

The Network tab is a tool available in modern web browsers that allows developers to inspect and analyze network requests and responses. In the video, the Network tab is used to visualize the excessive fetch requests being made due to the infinite loop caused by updating state in the render logic. This tool is essential for debugging and optimizing web applications, particularly when working with network-related operations like data fetching.

Highlights

In this lecture, we are going to break the rule of not updating state in render logic, so that we can understand why it exists in the first place.

Breaking rules is a great way of learning React and its rules better.

We will fetch movie data from the OMDb API as soon as the app component mounts for the first time.

Defining variables outside the component function prevents them from being recreated on every re-render.

Fetching data and updating state in the render logic introduces a side effect, which should never be allowed.

Updating state in render logic causes an infinite loop of state setting and re-rendering.

React will throw an error for too many re-renders if state is set directly in the top-level render logic.

To set state after fetching data without causing an infinite loop, we need to use the useEffect hook.

Defining variables outside the component function is a good practice to prevent unnecessary re-creation.

Fetching data from an API is an interaction with the outside world and should not be done in render logic.

Logging data to the console in render logic appears to work fine, but updating state causes issues.

Infinite loops of state setting and re-rendering can lead to performance issues and potentially crash the application.

React's strict mode helps catch potential issues like too many re-renders during development.

The useEffect hook is the correct way to handle side effects like data fetching in React components.

Breaking rules intentionally is a valuable learning experience to understand the rationale behind React's best practices.

Transcripts

‫Let's now load some data

‫into a React application for the very first time.

‫However, in this lecture,

‫let's start by doing it the wrong way basically,

‫which is going to be a great learning experience.

‫So in this section,

‫we are going to go back to our usePopcorn application

‫that we have been working on before.

‫And so let's now grab the project folder

‫and open it back up in VS code.

‫All right, now here

‫let's start by actually duplicating this file

‫and then I'm gonna rename one of them to app version one.

‫And so by doing this, we are not going to override the code

‫that we have written before.

‫And so you can keep it as a reference.

‫Now, as we have learned before in the previous section,

‫we should never update state in render logic, right?

‫But now in this lecture, let's actually break that rule

‫so that we can see

‫why it actually exists in the first place.

‫And breaking rules like this

‫is actually a pretty great way of learning Reacts

‫and also its rules even better.

‫Now, the idea here is to fetch some movie data

‫as soon as the app component here

‫mounts for the very first time,

‫so as soon as it has its initial render.

‫So to fetch that data, we use the OMDb API,

‫which is basically like an open version of IMDB.

‫Now to get started, you need to get your own API key,

‫which you can get for free just by clicking here

‫and then filling out this form.

‫And so immediately you will then get your free API key.

‫Now then once you have that, you can just come back here

‫to the main page so we can see how we can use this API.

‫So our data requests should simply be sent to this URL.

‫So just copy that.

‫And then here, let's fetch the data using the fetch API.

‫So using the fetch function like this.

‫Now, right.

‫Now, in case you're not familiar with the fetch function

‫and on how to work with asynchronous JavaScript,

‫then please go back to the beginning of the course

‫and take a look at the JavaScript review section

‫where I talk about all that in great length.

‫But anyway here now of course

‫you need to place your own key.

‫And actually I want to do this,

‫so I want to place this key in a separate variable.

‫So let's define that out here.

‫So key and by now, after that long previous section

‫you know why we should actually define a variable like this

‫outside the component function.

‫And the reason for that is that each time

‫the component gets re-rendered

‫this entire function here will be executed again.

‫So basically all the render logic.

‫And so if this variable definition here

‫is part of that render logic

‫it'll also be recreated each time data component renders,

‫which is in this case, of course, not a big deal

‫but it's good to already get

‫into the habit of not doing that.

‫So when you're just defining a variable like this

‫that doesn't depend on anything that's inside the component,

‫then just declare it outside.

‫Now I'm just getting my own API key,

‫but of course you should use your own one here.

‫And now let's go back to the documentation page

‫where we can see that we can query the API in two ways.

‫So we can search for an ID or a title

‫or we can actually search by some query string.

‫And so that's actually what we will do here.

‫So here let's use S and then equal.

‫And then here you can type your favorite movie,

‫which for me probably is "Interstellar".

‫Not 100% sure of that, but it's definitely a great one.

‫Okay.

‫But anyway, now we need to handle the promise

‫that the fetch function here returns inside.

‫And of course here it's then, so inside a then method,

‫which gets access to the response

‫and then here we can convert that response

‫to Json immediately, which will return another promise.

‫And so we chain on another then

‫and then here we get access to the data,

‫which we can then for now log to the console.

‫And for now, that's actually it.

‫So let's see what we get here.

‫Or of course we first need to

‫actually start our application.

‫So make sure you are in the right project folder here

‫and then type npm start.

‫So that should then open up the new tab here.

‫And indeed, there it is.

‫So let's check out our console

‫and let's just reload quickly.

‫And indeed you see that React was able

‫to fetch the data from the API.

‫So we are just interested in the search here.

‫And so all the movies here are in fact about "Interstellar",

‫which means that our query here is already working.

‫Now as we learned in the previous section,

‫this data fetching that we're doing right here is actually

‫introducing a side effect into the component's render logic.

‫So it is clearly an interaction with the outside world,

‫which should never be allowed in render logic.

‫So again, all this code that is here

‫at the top level of the function is of course

‫code that will run as the component first mounts

‫and therefore it is called render logic.

‫And so again, here we should have no side effects.

‫I mean, in this example

‫where we only log something to the console,

‫it actually appears to work just fine,

‫but watch what happens if we set some state here.

‫And to do that

‫let's actually first get rid of our temporary data here.

‫So this movie data and watched data

‫we only used as a template for the previous section,

‫but now let's get rid of that.

‫And so as I was just saying,

‫let's now here actually set state.

‫So that list of movies that we get from the API

‫we now want to get it into our movie state.

‫And so that's at data.search.

‫Give it a save and beautiful.

‫So we got some data from the API now showing up in our UI,

‫but watch what happens when we check out the network tab.

‫So you see that it's basically running

‫an infinite number of requests here, so it keeps going

‫and it never really stops.

‫So every second our app is firing off

‫multiple fetch requests to this API,

‫which of course is a really, really bad idea.

‫So why do you think that is?

‫Why do you think all these fetch requests

‫are being fired off?

‫Well, the reason is that setting the state here

‫in the render logic will then immediately

‫cause the component to re-render itself again.

‫So that's just how state works, right?

‫However, as the component is re-rendered,

‫the function here of course is executed again,

‫which then will fetch again,

‫which in turn will set the movies again as well.

‫And then this whole thing starts over and over again.

‫So as the state instead the component is re-rendered again,

‫which then will fetch again,

‫which will set the movies again.

‫And so this really is an infinite loop of state setting

‫and then the component re-rendering.

‫And so this is the reason why

‫it is really not allowed to set state in render logic.

‫So let's quickly set this back here

‫so that we don't have a million requests here.

‫And so as we reload, then it stops.

‫And let's just see another example here quickly.

‫So let's say we did set watched immediately here

‫in the top level code to some empty array

‫and then actually we do get a real error.

‫I mean, let's reload that.

‫And yeah, here we are now reloading all the time again

‫the data from the API.

‫But what matters here is that

‫we get the error of too many re-renders.

‫And so that's now because of this state setting right here.

‫So if we're really setting the state here in the top level

‫even without being inside a then handler

‫then immediately React will complain

‫that there are too many renders,

‫which means that we again entered that infinite loop

‫where updating state will cause a component to re-render,

‫which will cause the state to be set

‫and so on into infinity.

‫So let's of course get rid of that.

‫Let's reload here.

‫And so now we are again good.

‫However, we do actually want to set the state here.

‫So we do want set movies here,

‫but without all the problems that we just saw.

‫And so how can we do that?

‫Well, that's where we need the use effect hook

‫which we will learn about in the next lecture.