Day 33 - Effects and data fetching in React- Lesson 4

Synchronizing Queries With Movie Data

Today, I'm going to continue working on the usePopcorn project, starting with synchronizing the search query with the movie results. This involves adding functionality to the Search component to allow users to input a search query and displaying a list of movies based on that query.

Let's take a look at the Search component.👇👇

For this task, I've lifted some state up to the App from the Search component.👇👇

Then pass the state variable and the updater function as props to the Search component and destructure the props in the Search component so that they will be available.👇

Before I continue👇🤔

Say we have three different console.log statements:

1. The first effect logs the string "a".

2. The second effect, without a dependency array, logs the string "b".

3. Finally, there's a console.log at the top level which logs the string "c".

Now, without running the code, let's try to guess the order in which these three strings will appear in the console. Have you thought about it? 🤔🤔

Upon saving, we observe multiple renders and results due to the application rendering multiple times. It's crucial to note that these effects run twice due to a lot of rendering and re-rendering happening here. However, what matters is the order: c, a, and then b.

Why did we get c first, even though it's later in the code?

Well, as we discussed before, effects only run after the browser paint, while render logic runs during render. Thus, the console.log executes first during the render of this component, followed by a and b from the effects. a is rendered first simply because it appears first in the code.

---

Let's clear the console and type something in the search to observe more outputs. We see C and B. Is this what you expected? Let's analyze what happened.

I updated the query state, causing the component to re-render. Like before, the code was executed, resulting in c followed by b from the effects.

The first effect, synchronized with no variables, wasn't executed as the component was re-rendered with the query state because with an empty dependency array the effect runs only on initial render.👇

We can label these strings: 'during render', 'after every render', and 'after the initial render' for reference.

Result 👇

---

I'll proceed with another experiment, adding an effect that logs "d" to the console, synchronized with the query state variable. Upon typing, we see "d" logged to the console, showing how it reacts to changes in the query state. This demonstrates the reactive nature of effects. 👇

I'll comment out these experiments and reload. It's time to use the query from here in the URL where we fetch the movies.

But this won't work as is because the effect isn't synchronized with the query state yet. I already received a warning from React.👇👇

To fix this👇

It seems that for now, we're encountering this issue 👇👇

Before proceeding, let's reset the error state. This should be done at the beginning, before fetching any data. Let's set the error state to an empty string.👇

Now, let's search for the query "spider"^👇

Let's fix the issue where "Movie not found" appears when there's no search query.👇

So, If there's no query length, we'll set movies back to an empty array and reset the error. Additionally, if the query length is less than three, it's not worth searching.👇👇

To be continued..

Thank you for reading.💕