In this lesson, we learned how to write effects that manage timers, manipulate the DOM, and fetch data from a server. In earlier versions of React, we could only have executed this type of code in the lifecycle methods of class components, but we can now perform these types of actions in function components as well!
Let’s review the main concepts from this lesson:
useEffect()- we can import this function from the ‘react’ library and call it in our function components
useEffect()function. By default, the Effect Hook calls this effect after each render
useEffect()function can be called with in order to prevent repeatedly calling the effect when this is not needed. This array should consist of all variables that the effect depends on.
The Effect Hook is all about scheduling when our effect’s code gets executed. We can use the dependency array to configure when our effect is called in the following ways:
|Dependency Array||Effect called after first render & …|
|Empty array||no re-renders|
|Non-empty array||when any value in the dependency array changes|
Hooks gives us the flexibility to organize our code in different ways, grouping related data as well as separating concerns to keep code simple, error-free, reusable, and testable!
Congratulations on finishing this lesson! With the new skills and information in this lesson, there’s so much functionality that you can now add to the function components in your own React apps!