One of the most useful React hooks is the useEffect hook. It allows you to keep your component in sync with external sources. These sources can be anything from data from an API you're fetching or even an animation being triggered. I've used this in various projects over time but was originally confused about how it worked and what each part meant. If you can relate, here's just a quick and easy guide to get you started with useEffect.

When To Use It

When you want your component in-sync with something outside of itself. Some examples:

Fetching data from an API

This is probably one of the more common uses: you want to run some asynchronous process and want to then use the result from that process in your component somehow.