The useEffect Dependency Array | Lecture 145 | React.JS đ„
Summary
TLDRThis lecture delves into the intricacies of React's useEffect hook, explaining its dependency array and how it synchronizes effects with state and props. It highlights the importance of correctly specifying dependencies to avoid bugs and ensure that effects run only when necessary, after the component has been rendered. The talk also touches on the relationship between effects, component lifecycle, and the asynchronous nature of effect execution, emphasizing the role of useEffect as a synchronization mechanism between component state and external systems.
Takeaways
- đ§ The `useEffect` hook can be controlled by passing a dependency array to determine when the effect should run.
- đ By default, an effect runs after every render, which is often not desired behavior.
- đ The dependency array includes state variables and props used within the effect to guide when the effect should execute.
- đŠ Effects are reactive, similar to how React reacts to state updates by re-rendering the UI.
- đ The `useEffect` hook acts as a synchronization mechanism between the component's state/props and external systems.
- đ The effect will re-run whenever a dependency changes, ensuring the component stays in sync with its dependencies.
- đ« Omitting the dependency array or including too many dependencies can lead to performance issues or bugs, including stale closures.
- đ An empty dependency array means the effect will only run once, on component mount.
- đ If no dependency array is provided, the effect will run on every render, which is typically undesirable.
- âł Effects are executed asynchronously, after the browser has painted the component to the screen, to avoid blocking the rendering process.
- đ Layout effects run before the browser paints the new screen, but their use is discouraged by the React team.
Q & A
What is the default behavior of the useEffect hook in React?
-By default, the useEffect hook runs after each and every render of the component.
How can we change the default behavior of the useEffect hook?
-We can change the default behavior by passing a dependency array as the second argument to the useEffect hook.
Why does React need a dependency array for useEffect?
-React needs a dependency array to know when to run the effect, specifically, it will execute the effect each time one of the dependencies changes.
What are the dependencies in the context of useEffect?
-Dependencies are state variables and props that are used inside the effect function.
What is the rule for including state variables and props in the dependency array?
-Each and every state variable and prop used inside the effect must be included in the dependency array.
What is a stale closure and how does it relate to useEffect?
-A stale closure is a bug that occurs when React doesn't know about a change in the title or user rating, and therefore doesn't re-execute the effect code, leading to outdated state.
How does the useEffect hook act as a synchronization mechanism?
-The useEffect hook acts like an event listener for dependencies, executing the effect again when one of the dependencies changes, thus keeping the component synchronized with the state of the application.
What happens if an effect does not have any dependencies?
-If an effect has no dependencies, it will only run once, on mount, because it doesn't use any values relevant for rendering the component.
Why are effects executed after the browser has painted the component instance on the screen?
-Effects are executed after the paint phase to avoid blocking the rendering process, especially when effects contain long-running processes like fetching data.
What is a layout effect and when is it used?
-A layout effect is a type of effect in React that runs before the browser paints the new screen. It is rarely needed and discouraged by the React team.
What is the timeline of events when a component renders and re-renders?
-The timeline starts with mounting the component, followed by rendering, committing the result to the DOM, painting the changes onto the screen, and finally executing effects after the screen has been updated.
Outlines
đ Understanding the useEffect Hook and Dependency Array
This paragraph explains the purpose and functionality of the useEffect hook in React, emphasizing the importance of the dependency array. It clarifies that the useEffect hook is used to control when effects should run, which is determined by the state of the dependencies specified in the array. The speaker also introduces the concept of stale closure and hints at further discussion on this topic. The paragraph highlights that effects are reactive, similar to how React responds to state updates, and that they are used to synchronize a component with an external system, such as updating the document title based on component state or props.
đ Synchronization and the Component Life Cycle
The second paragraph delves into how effects are synchronized with the state of the application and how they are deeply connected to the component's life cycle. It explains that effects are not just for side effects but are also a synchronization mechanism. The speaker clarifies that effects will re-run whenever a dependency changes, leading to a re-render of the component. The paragraph also discusses the different types of dependency arrays and their impact on synchronization and the life cycle, including the initial render, re-renders, and the execution of effects after the render process.
đ Execution Timing of Effects
The final paragraph addresses the timing of effect execution during the render and commit process. It clarifies that effects are executed asynchronously, after the browser has painted the component instance to the screen. This is to prevent long-running processes, like data fetching, from blocking the rendering process and causing a poor user experience. The paragraph also touches on the need for an additional render if an effect sets state, and briefly mentions layout effects, which run before the browser paints the new screen, though their use is discouraged.
Mindmap
Keywords
đĄuseEffect
đĄdependency array
đĄstale closure
đĄsynchronization
đĄcomponent life cycle
đĄasynchronous execution
đĄlayout effect
đĄre-render
đĄempty dependency array
đĄno dependency array
Highlights
The useEffect hook can change the default behavior of running after every render by using a dependency array.
React doesn't know when to run the effect without a dependency array.
The effect will execute each time a dependency changes.
Dependencies are state variables and props used inside the effect.
Each state variable and prop must be included in the dependency array.
Not including dependencies in the array can lead to a bug called stale closure.
The useEffect hook acts like an event listener for dependencies.
Effects are reactive, similar to how React reacts to state updates.
Effects are used to keep a component synchronized with an external system.
The dependency array is crucial for the useEffect hook's functionality.
Effects and the component life cycle are deeply interconnected.
The useEffect hook is about synchronization and the component life cycle.
An empty dependency array means the effect runs only on mount.
No array at all means the effect runs on every render, which is usually undesirable.
Effects are executed after the browser has painted the component instance on the screen.
Effects may contain long-running processes like fetching data.
If an effect sets state, a second additional render is required.
Layout effects run before the browser paints the new screen and are discouraged by the React team.
Transcripts
â«So, I have mentioned
â«the use effect dependency array a few times already,
â«but we don't know yet what it actually does
â«and how it works.
â«So, let's change that in this lecture.
â«So, as we saw at the beginning of this section,
â«by default in effect will run after each and every render.
â«However, that's almost never what we want.
â«But, the good news is
â«that we can change this default behavior
â«by passing a dependency array into the useEffect hook
â«as a second argument,
â«but why does use effect actually need
â«an array of dependencies, you might ask?
â«Well, the reason is that without this array,
â«React doesn't know when to actually run the effect.
â«But, if we do specify the effect dependencies
â«by passing in the dependency array,
â«the effect will be executed each time
â«that one of the dependencies changes.
â«And, we will come back to why this is so amazing
â«in the next slide.
â«But, for now, this is all you need to know.
â«Now, what exactly are those dependencies?
â«Well, effect dependencies are state variables
â«and props that are used inside the effect.
â«And, the rule is that each
â«and every one of those state variables and props
â«must be included in the dependency array.
â«But, let's take a look at an example
â«to understand what I'm talking about.
â«And, the code here is really not important.
â«What matters is that the effect uses the title prop
â«and the user rating state.
â«We can clearly see at the top of the code
â«that title is indeed a prop
â«and that user rating is indeed a APs of state.
â«Therefore, both of them must be included
â«in the dependency array.
â«So, the effect function depends on these variables
â«to do its work,
â«and therefore we need to tell React about them.
â«Otherwise, if the title or the user rating changes,
â«React will not know about this change,
â«and, therefore, it won't be able to re-execute
â«the effect code.
â«And, this will then lead to a bug called stale closure.
â«And, we will talk about what a stale closure is
â«and also about some more rules for the dependency array
â«in a later more advanced section.
â«But, for now, let's actually understand
â«why the dependency array is so important
â«for the useEffect hook.
â«So, I like to think of the useEffect hook
â«as an event listener that is listening
â«for one or more dependencies to change.
â«And, when one of the dependencies does change,
â«use effect will simply execute the effect again.
â«So, a bit like a regular event listener,
â«but for effects.
â«But, let's go back to our previous example
â«where we had the title and user rating dependencies
â«in the array.
â«So, whenever the title or the user rating changes,
â«React will execute the effect again.
â«So, it will run the code one more time,
â«which will in turn update the document title.
â«So, the website title that we see in a browser tab.
â«So, essentially, effects react to updates
â«to state and props that are used inside the effect,
â«because, again, those are the effects' dependencies.
â«So, in a way, effects are reactive,
â«just like React reacts to state updates
â«by re-rendering the UI.
â«And, this is extremely useful and powerful,
â«as we will see throughout the rest of the course.
â«But, all this only works if we correctly specify
â«the dependency array.
â«Okay, but now let's remember how I said
â«in the very first lecture about effects,
â«that effects are used to keep a component synchronized
â«with some external system.
â«So, some system that lives outside of our React based code.
â«And, if we think about it,
â«that's exactly what is happening here.
â«So, the state and props of our component
â«are now in fact synchronized with an external system,
â«which is, in this case, the title of the document.
â«Now, updating the title in some other way
â«will, of course, not magically update the title
â«or user rating.
â«So, the synchronization only works in one way,
â«but that's not really the point.
â«The same actually happens with state updates
â«and we still say that the UI is in sync with state.
â«So, the point is that use effect
â«truly is a synchronization mechanism,
â«so a mechanism to synchronize effects
â«with the state of the application.
â«And, you will discover this
â«each time that you're going to use an effect.
â«And, so let's go explore this a little bit further.
â«So, as we just learned, whenever a dependency changes,
â«the effect is executed again.
â«But, now, let's remember that dependencies
â«are always state or props.
â«And, what happens to a component each time that its state
â«or props are updated?
â«Well, that's right.
â«The component will re-render.
â«This means that effects
â«and the life cycle of a component instance
â«are deeply interconnected.
â«That's why when the useEffect hook was first introduced,
â«many people thought that it was a life cycle hook
â«rather than a hook for synchronizing the component
â«with a side effect.
â«Now, the conclusion and the big takeaway from this
â«is that we can use the dependency array
â«in order to run effects
â«whenever the component renders or re-renders.
â«So, in a way, the useEffect hook
â«is actually about synchronization
â«and about the component life cycle.
â«Okay, and so with this knowledge,
â«let's look at the three different types of dependency arrays
â«that we can specify
â«and also how they affect both synchronization
â«and life cycle.
â«So, when we have multiple dependencies
â«like in this first example, variables X, Y, and Z,
â«it means that the effect synchronizes with X, Y, and Z.
â«Now, in terms of the life cycle,
â«it means that the effect will run on the initial render
â«and also on each re-render triggered by updating
â«one of the dependencies X, Y, or Z.
â«So, again, just to make this crystal clear,
â«the effect will be executed each time
â«the component instance is being re-rendered
â«by an update to X, Y, or Z.
â«But, if some other piece of state or prop is updated,
â«then this particular effect will not be executed.
â«Now, if we have an empty dependency array,
â«that means that the effect synchronizes
â«with no state or props,
â«and therefore it will only run on mount.
â«In other words, if an effect has no dependencies,
â«it doesn't use any values that are relevant
â«for rendering the component.
â«And, so, therefore, it's safe to be executed only once.
â«Finally, if we have no array at all,
â«we already know that the effect will run on every render,
â«which is usually a really bad idea and not what we want.
â«Now, if the effect runs on every render,
â«that basically means that the effect
â«synchronizes with everything.
â«So, essentially every state and every prop in the component
â«will be dependencies in this case.
â«And, now, to finish,
â«let's look at when exactly effects are executed
â«during the render and commit process.
â«Now, I mentioned in the first lecture on effects
â«that effects are executed after render.
â«And, while that's not wrong, it's also not the full story.
â«So, let's look at a timeline of events that happen
â«as components render and re-render.
â«And, I found this extremely useful
â«when I first learned about the useEffect hook myself.
â«And, so I think that you will benefit from this as well.
â«So, as we already know,
â«the whole process starts with mounting
â«the component instance,
â«in this case an instance of movie details.
â«After that, the result of rendering
â«is committed to the dom,
â«and finally the dom changes are painted onto the screen
â«by the browser.
â«So, this is just what we learned in the previous section,
â«but where do effects come into play here?
â«Well, effects are actually only executed
â«after the browser has painted the component instance
â«on the screen.
â«So, not immediately after render,
â«as you might have thought initially.
â«That's why we say that effects run asynchronously
â«after the render has already been painted to the screen.
â«And, the reasons why effect work this way
â«is that effects may contain long-running processes,
â«such as fetching data.
â«So, in a situation like that,
â«if React would execute the effect
â«before the browser paints a new screen,
â«it would block this entire process,
â«and users would see an old version of the component
â«for way too long.
â«And, of course, that would be very undesirable.
â«Now, one important consequence of the fact
â«that effects do not run during render
â«is that if an effect sets state,
â«then a second additional render
â«will be required to display the UI correctly.
â«And, so this is one of the reasons
â«why you shouldn't overuse effects.
â«Okay, but moving on now,
â«let's say that the title was initially set to Interstellar,
â«but then it changes to Interstellar Wars.
â«And, since this title is a prop,
â«it means that the component will re-render,
â«and the dom changes will be committed
â«and painted to the screen again.
â«Now, since title is part
â«of the dependency array of this effect,
â«the effect will be executed again at this point.
â«So, just as we learned in the last slide.
â«And, this whole process can of course be repeated
â«over and over again
â«until this movie details instance
â«finally unmounts and disappears from the screen.
â«Now, you might notice that there is actually a hole
â«between the commit and browser paint, right?
â«And, the reason is that, in React,
â«there's actually another type of effect
â«called a layout effect.
â«So, the only difference between a regular effect
â«and a layout effect is that the layout effect runs
â«before the browser actually paints the new screen.
â«But, we almost never need this.
â«And, so the React team actually discourages
â«the use of this use layout effect hook.
â«I simply mentioned this here
â«so that you know that this also exists.
â«And, actually, there are even two more holds
â«in this timeline.
â«But, we will talk about these mystery steps
â«by the end of the section.
â«So, stay tuned for that.
Voir Plus de Vidéos Connexes
![](https://i.ytimg.com/vi/LIYiLpO4brM/hq720.jpg)
A First Look at Effects | Lecture 141 | React.JS đ„
![](https://i.ytimg.com/vi/o-Bm_rGIBIk/hq720.jpg)
useEffect to the Rescue | Lecture 140 | React.JS đ„
![](https://i.ytimg.com/vi/StkNmef11Xc/hq720.jpg)
The useEffect Cleanup Function | Lecture 151 | React.JS đ„
![](https://i.ytimg.com/vi/bGzanfKVFeU/hq720.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGBMgRCh_MA8=&rs=AOn4CLD0rmN1eVj7iO2E7mEbjGS94clCmg)
Goodbye, useEffect - David Khourshid
![](https://i.ytimg.com/vi/mi2NdORCWGQ/hq720.jpg)
Rules for Render Logic: Pure Components | Lecture 131 | React.JS đ„
![](https://i.ytimg.com/vi/VQd8DKV1D2M/hq720.jpg)
How NOT to Fetch Data in React | Lecture 139 | React.JS đ„
5.0 / 5 (0 votes)