Using an async Function | Lecture 142 | React.JS 🔥

Summary

In this video, the presenter demonstrates how to convert a synchronous promise handling to an asynchronous function within a React effect. They explain the importance of avoiding race conditions and the limitations of effect callbacks. The tutorial shows how to create a new async function, 'fetchMovies', to handle API calls and update state, while also addressing the issue of stale state by using the latest data. The video also touches on React's strict mode and its impact on effect calls during development, ensuring that potential issues are caught before production.

Takeaways

• 🔄 Converting a function to async allows for cleaner handling of Promises using async/await syntax.
• 🚨 ESLint warns against using async functions directly in effect callbacks due to React's requirement for them to be synchronous.
• 🎯 To work with async functions in React effects, encapsulate the async logic in a separate function that is called within the effect.
• ✅ The await keyword is used to wait for the Promise to resolve within the async function.
• 📦 Data fetched from an API is typically converted to JSON, which is an asynchronous operation.
• 🔧 State updates in React are asynchronous, meaning the state may not be immediately updated after a setState call.
• 🔍 Logging state to the console right after a state update might show stale data due to the asynchronous nature of state changes.
• 🔁 React's strict mode in development doubles the number of effect calls to help identify potential issues with effects.
• 🛠 Removing strict mode can demonstrate the actual number of HTTP requests made, but it's recommended to keep it for safety in development.
• 📈 Adding a loading state can improve the user experience by indicating when data fetching is in progress.

Q & A

What is the purpose of converting a promise handling to an async function?

Converting promise handling to an async function makes the code easier and nicer to manage, especially when dealing with complex asynchronous operations.

Why can't we directly use an async function in the effect callback of `useEffect`?

Effect callbacks in `useEffect` must be synchronous to prevent race conditions. Async functions return promises, which are not allowed in this context.

How does the speaker suggest handling the limitation of not using async functions directly in `useEffect`?

The speaker suggests creating a new function outside of the `useEffect` and then placing the async function within that new function to avoid the ESLint warning.

What is the role of the `fetchMovies` function in the script?

The `fetchMovies` function is an async function that is used to fetch data from an API and is called within the effect to handle the data fetching logic.

Why does the speaker mention that setting state is asynchronous?

Setting state in React is asynchronous to ensure that the state updates do not cause race conditions. This means that the state is not updated immediately after the instruction to set it.

What is the issue with logging the `movies` state before it is updated?

Logging the `movies` state before it is updated results in an empty array because the state update is asynchronous and has not yet been applied when the log statement is executed.

How does the speaker address the issue of logging the updated `movies` state?

The speaker suggests using the variable `data.Search` instead of `movies` in the log statement to correctly display the fetched data.

What is the purpose of React's strict mode in the context of effects?

React's strict mode, when activated, calls effects twice in development to help identify potential issues with the effects. This does not occur in production to ensure performance.

Why does the speaker recommend keeping strict mode enabled in the code?

Keeping strict mode enabled is recommended because it provides additional safety checks during development, helping to identify and fix potential problems with the effects before the application goes into production.

What is the next step the speaker plans to cover in the video series?

The next step the speaker plans to cover is adding a loading state to the data fetching process to improve the user experience and provide feedback while data is being fetched.

Outlines

00:00

🔄 Converting to Async Functions

The script discusses the process of converting a function that handles promises into an asynchronous function for better code management. It highlights the use of async/await for handling promises and the importance of understanding the concept before proceeding. The script also addresses the ESLint warning about effect callbacks being synchronous and the solution of creating a new function to place the async function within. The example given involves fetching movies from an API, handling the response, and setting state. It also touches on the issue of stale state due to the asynchronous nature of state updates and the behavior of React's strict mode, which doubles the effect calls in development for debugging purposes.

05:03

🔧 Debugging and State Management

This paragraph focuses on debugging the code to understand why there are two outputs and HTTP requests when fetching data. It explains that React's strict mode in development can cause effects to run twice, which is not the case in production. The script then demonstrates how removing strict mode affects the output and HTTP requests, confirming that the effect is called only once. Finally, it suggests adding a loading state to the data fetching process to improve the user experience.

Keywords

💡async function

An async function is a JavaScript function that can use the `await` expression. It's used to simplify the handling of Promises, making asynchronous code easier to read and write. In the video, the speaker converts a function to an async function to handle a promise more elegantly, which is a common practice in modern JavaScript development, especially when dealing with asynchronous operations like fetching data from an API.

💡await

The `await` keyword is used with a Promise to wait for its resolution. It can only be used inside an async function and it pauses the execution of the async function until the Promise is resolved or rejected. In the video, the speaker uses `await` to wait for the response from the API and then processes the data, which is a fundamental concept in asynchronous programming.

💡ESLint

ESLint is a static code analysis tool for identifying and reporting on patterns in JavaScript. It helps developers find and fix problems in their code, adhering to certain coding standards. In the video, ESLint warns against using async functions in effect callbacks, which are meant to be synchronous to prevent race conditions.

💡race conditions

A race condition occurs when two or more processes access shared data and try to change it at the same time. This can lead to unpredictable results. In the context of the video, the speaker mentions that effect functions in React should be synchronous to avoid such issues, ensuring that state updates don't conflict with each other.

💡React

React is a JavaScript library for building user interfaces, particularly useful for creating single-page applications. It allows developers to create reusable UI components and manage their state efficiently. The video discusses the use of React's `useEffect` hook and its interaction with async functions and Promises.

💡useEffect

The `useEffect` hook in React is used to perform side effects in function components. It's similar to the `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` lifecycle methods combined. In the video, the speaker uses `useEffect` to handle data fetching and state updates.

💡state

In React, state is an object that represents the data that can change over time in a component. It's used to manage the internal state of a component and trigger re-renders when the state changes. The video discusses the asynchronous nature of state updates and how they relate to the timing of effects.

💡Promise

A Promise in JavaScript is an object that may produce a single value in the future. It represents a proxy for a value not necessarily known when the promise is created. Promises are used to handle asynchronous operations, like fetching data from an API. In the video, the speaker discusses the conversion of Promises to async functions for better code readability.

💡strict mode

React's strict mode is a way to enable additional checks and warnings for a component and its children. It helps developers catch potential problems in development, which are not present in production builds. In the video, the speaker explains that React 18's strict mode causes effects to run twice in development, which is a feature to help identify issues with effects.

💡loading state

A loading state is a UI pattern used to inform users that an operation is in progress, such as fetching data. It's a way to manage user expectations and provide feedback during asynchronous operations. In the video, the speaker plans to add a loading state to the data fetching process to improve the user experience.

Highlights

Converting effect to an async function for easier promise handling.

Using async/await for cleaner code when dealing with promises.

ESLint warning about effect callbacks being synchronous to prevent race conditions.

Effect functions in useEffect cannot return a promise.

Creating a new function to wrap the async function for use within useEffect.

Adapting the function to use the await keyword for asynchronous operations.

Setting state is asynchronous and does not happen immediately.

React's strict mode causing effects to run twice in development for error detection.

Removing strict mode results in only one HTTP request, indicating the effect was called once.

React's strict mode is a safety feature to identify issues with effects.

The initial state is an empty array, leading to stale state issues.

Using data.Search to access the correct state value after state has been set.

Logging the received movies to the console to demonstrate state updates.

React 18's strict mode behavior differs between development and production.

The video aims to make data fetching more complete with a loading state.

The async function fetchMovies is defined and called within the effect.

The use of the yellow underline in the code editor indicates a problem with the function call.

The video demonstrates the concept of stale state by showing an empty array in the console.

The video explains the difference between development and production behavior in React's strict mode.

Transcripts

‫Let's now convert our effect to an async function

‫instead of the basic promise handling

‫that we're doing right now.

‫So, many times when we need a lot of code

‫to handle a promise,

‫it's a lot easier and nicer to just have an async function.

‫And here, I will just assume

‫that you already know what async await is.

‫So we might think that all we need to do

‫in order to use an async function

‫is to place the async keyword here,

‫and then use await inside of it.

‫However, we immediately get this warning from ESLint

‫which tells us that effect callbacks

‫are synchronous to prevent race conditions.

‫So basically the effect function

‫that we place into use effect cannot return a promise,

‫which is what an async function does.

‫So instead of doing it directly like this,

‫we just create a new function.

‫And then we place the async function in there.

‫So let's call this one fetchMovies.

‫And then let's of course adapt this function here,

‫to using the await keyword.

‫So const res equals await,

‫and again, I'm assuming that you already know

‫how all of this works.

‫So that converting to promises to an async function

‫is nothing new for you at this point.

‫So data will be the result

‫of converting the response to JSON,

‫which is again, an asynchronous operation.

‫And then, finally, we can set the movies to data.Search.

‫So just what we had here.

‫All right.

‫But now of course nothing is happening,

‫because nowhere we are calling this function.

‫So that's also why this gets this yellow underline here.

‫So our effect is now this function right here.

‫But this function, all it's doing right now,

‫is to define yet another function.

‫So this async fetchMovies.

‫And so then at the end, we just call it,

‫and then it is back to working.

‫Now here, I just want to extract this here

‫for now into another variable,

‫which I'm going to call query.

‫And this is just temporary here.

‫Now, okay.

‫And now what I also want to do is to log our movies here.

‫So the movies that we received from the API to the console,

‫just so I can show you something.

‫Let's first reload to get rid of the arrows there.

‫And now what I want to do here, again,

‫is to log our movies to the console.

‫So, do you think that I can just do this?

‫So you think that this is going to work?

‫Well, let's see.

‫And let's reload to actually see the truer result,

‫which is an empty array.

‫So why is this happening?

‫Well, hopefully you learned in the previous section

‫that setting state is asynchronous.

‫So in other words, after the state

‫has been set here in this line of code,

‫or actually after we instructed React to set the state,

‫that doesn't mean that this happens immediately.

‫So instead, it will happen

‫after this function here has been called.

‫And so right here in this line of code, we have stale state

‫which basically means that we still have the old value

‫as the state was before.

‫And in this case, before, it was just the empty array.

‫So our initial state.

‫So here we can basically then use data.Search again.

‫And so, as we reload now, then we get here the output.

‫Now what I wanted to talk about

‫is why we always have these two outputs.

‫So, basically why we have these two requests here happening.

‫Well, the reason for that is React's strict mode.

‫So when strict mode is activated in React 18,

‫our effects will not run only once, but actually twice.

‫So React will call our effects twice

‫but only in development.

‫So when our application is in production,

‫this will no longer be happening.

‫And so this is just so that React can identify

‫if there are any problems with our effects.

‫So if we come here quickly just to index.JS

‫and if we remove the strict mode from here,

‫well then we have this problem.

‫Let's actually remove the code.

‫Let's save and let's reload.

‫And then you see that we only get one output here,

‫which means that there was only one HTTP request.

‫So the effect was only called once indeed.

‫But let's put it back

‫because this is somehow a bit safer.

‫Now, okay, and that's it for this video.

‫Next up, let's make this data fetching here

‫a bit more complete with a loading state.