Effects and data fetching.

In the vast majority of React applications, around 95%, data fetching from APIs is a fundamental requirement. Consequently, mastering data fetching is crucial when developing web applications.

One common method for fetching data in React is by utilizing the useEffect Hook. I'll delve into how and when effects are triggered, as well as how to properly manage them and how we can clean effects up.

Throughout this Learning, I'll continue our work on the usePopcorn project, exploring side effects in depth. By loading external data into our applications, we can enhance their realism and interactivity, making them feel more dynamic and responsive to real-world scenarios.

Component Lifecycle

When we say "component lifecycle," we're basically talking about the different stages that a particular instance of a component can undergo throughout its existence.

Firstly, a component is "mounted," meaning it's initially rendered. This is akin to its birth, where it appears on the screen with its initial state and props set up.

Following mounting, a component may undergo multiple "re-renders" if its state or props change, or if its parent component re-renders.

However, not all components undergo the re-render phase. Some are simply mounted and then immediately unmounted.

Eventually, a component reaches the point where it's no longer needed and gets "unmounted," effectively removed from the screen along with its state and props.

Understanding the component lifecycle is important because we can integrate code to execute at specific lifecycle points, which can be very useful.

UseEffect in practice.

How not to fetch Data❌

First, I'll duplicate the file and rename the previous as "app version one." This way, I won't override the code I've written before, and I can keep it as a reference.👇👇

Now, i'll load some data into a React application for the first time😊. However, I'll start by doing it the wrong way as a learning experience.

Getting API Key from OMDB.

Before I start, I'm going to get my API Key from OMDB. Once I have my API key, I can use it to make requests to the API. Our data requests will be sent to a specific URL provided in the API documentation. I'll be searching with my desired query parameter.👇👇The query parameter s=wednesday indicates that I'm searching for movies with the title "wednesday"

Result👇👇

Here, setMovies(data.Search) is then called to update the movies state variable with the array of movie search results. setMovies is a function returned by the useState hook, and calling it with new data triggers a re-render of the component with the updated state.👇👇

This seems to have worked just fine, right? Well, no, let's see what happens when I check the network tab👇👇.

Fetching data like this introduces a side effect into the component's render logic, which is not recommended. The code written at the top level of the function will run each time the component renders, and ideally should contain no side effects. Setting state triggers a re-render, leading to an infinite loop of fetching and rendering.

Note: We should never update state in render logic.

To address this issue, I'll use the useEffect hook.

Fetching Data the right way ✔💪

The useEffect hook provides a safe place for us to write side effects, such as data fetching, within our components. These side effects will only be executed after certain renders, such as after the initial render, which is precisely what we need in this situation.

To use the useEffect hook, we simply write useEffect and ensure it's imported from React. Like useState, useEffect is a function provided by React. It takes in a function as its argument, which contains the code we want to run as a side effect.

Additionally, we need to pass in a second argument, known as the dependency array. This array determines when the effect should run. By passing an empty array, [], we ensure that the effect only runs on mount, i.e., when the component renders for the first time.

After setting up the useEffect hook, we can perform actions like setting state, in this case, setting movies with setMovies.

By using useEffect in this manner, we prevent infinite loops and excessive API requests, as the effect runs only when the component mounts.

In summary, we've utilized the useEffect hook to register a side effect function that runs after the component has been rendered. This allows us to fetch data or perform other tasks only when necessary, enhancing the efficiency and behavior of our React application.

Thank you for reading..😊❤

To be continued.