Day 35- Effect and data fetching in React-Lesson 6

Adding watched movie cont'd

Alright, let's tackle the issue of preventing duplicate movies from being added to the watched list. Currently, I can add the same movie multiple times, which isn't what we want. When I do this, React might give us a warning about it.👇👇

So first, I pass the watched array into the MovieDetails component..👇👇

And with that, we can check if each of these movies is already a part of the watched list by verifying if the selectedId is present in the list of IMDb IDs of movies stored in the watched array. The result will be printed out as true if the movie is watched and false otherwise and the value is stored in the isWatched variable.👇👇

Then, we conditionally render a paragraph. Depending on whether the movie isWatched or !isWatched, different UI components or messages are rendered accordingly. If isWatched is true (indicating the movie is watched), a paragraph element (<p>...</p>) is rendered with the text "You rated this movie".👇👇

Now, the remaining task is to display the current rating in the paragraph. We'll derive this information again from the watched array.

The code searches through an array of watched movies (watched) to find the movie object that has an IMDb ID (imdbID) matching the selectedId variable. If such a movie object is found, it retrieves the userRating property of that movie and assigns it to the watchedMovieRating variable. However, if no movie with the specified IMDb ID is found, watchedMovieRating will be undefined.👇👇

Now I use it here.👇👇

Deleting watched movie

Alright, now I'll implement the ability to remove movies from the list. Let's return to where the state is managed and add the function for handling deleting watched movies, called handleDeleteWatched 👇👇

The handleDeleteWatched function is responsible for updating the state variable watchedMovies by filtering out the movie with the specified ID from the array of watched movies.

Now, let's pass this function into the list here, specifically the WatchedMoviesList. The movies displayed in the WatchedMoviesList are contained within it, so we need to pass this function into there. This will allow us to then pass it into each of these movie components. The prop name for this function will be onDeleteWatched, which corresponds to the handleDeleteWatched function.👇👇

Let's move to the WatchedMoviesList component, and destructure the onDeleteWatched prop. Then, let's immediately pass that down into the child component WatchedMovie.👇

Adding a new effect : Changing page title

The goal is to change the title of the web page dynamically to reflect the movie currently being viewed.

First, I'll go to the index.html file and change the title to "MovieMania".👇

Since changing the browser title is considered a side effect, the useEffect hook is used to handle this operation.

The useEffect hook should be placed in the component (MovieDetail component in this case) where the change in the browser title should occur, i.e., when a new movie is selected.

Inside the useEffect hook, document.title is updated to reflect the title of the currently viewed movie.👇👇

Initially, the effect runs only once when the component mounts. To ensure it updates when the movie changes, the title variable (which presumably holds the title of the currently viewed movie) is added to the dependency array of useEffect.👇👇

To avoid briefly displaying "undefined" in the browser title when the component first mounts or when transitioning between movies, a check is added to return early if the title is undefined.👇

Upon navigating back to the home page, I notice that the browser title still reflects the previously viewed movie instead of reverting to the default title ("MovieMania"). To address this issue, I'll need to learn about the concept of cleanup first.

Cleanup function

The third aspect of an effect in React is the cleanup function, which allows us to execute code when a component unmounts. This is essential for maintaining synchronization between the application and the browser, ensuring that side effects are properly managed. By returning a cleanup function from the effect, we can reset any side effects or clean up resources.

Cleanup in React refers to the process of "cleaning up" or performing necessary actions when a component is unmounted or when its dependencies change.🤔🤔

The cleanup function serves two main purposes.

• Firstly, it is executed before the next effect runs, ensuring that any previous side effects are cleaned up.

• Secondly, it runs immediately after the component unmounts, giving us the opportunity to reset any side effects specific to that component instance.

  👉This completes the component lifecycle management.

A cleanup function is particularly crucial when dealing with ongoing side effects, such as HTTP requests or subscriptions, to prevent issues like race conditions. For instance, canceling requests or unsubscribing from services in the cleanup function helps avoid conflicts between different instances of the same effect.

Following the principle of keeping effects focused, it's recommended to use separate useEffect hooks for different tasks within a component. This not only enhances clarity but also facilitates cleanup management. Each effect should have a single responsibility, making the code easier to maintain and understand.

To sum up, knowing how to use cleanup functions alongside effects helps us manage side effects efficiently and keeps our React components working smoothly. Now, I'll use these ideas as we keep building our application.

So I'll do this tomorrow ✍

Thank you for reading..💪