Hooks - useEffect (Catching Changes in a Component)

The useEffect is a hook that catches changes in a component. It works similarly to event or setInterval and using this we can update the component whenever there is a change.

Setting Up a Project

Creating a React App

React

How to Use It?

Import the hook and initialize it as shown below.

We can add the targets in an array after the curly braces. So whatever you put in the array will be tracked to catch the changes (Like the event and setInterval combined).

Examples

Creating a Context

Add a context and create a status to track

Adding Components

Add a component and initialize the useEffect hook with the status brought in from the context.

Go to the app component and add the context provider to use the context and inside there add the component.

Testing

Run the app and click the button. Whenever the button is clicked you will see the change is tracked.

In this writing, we have seen how to use the useEffect hook.

---

References

Traversy Media - YouTube

Traversy Media