Member-only story
After the hook introduction post and state hook post, it is time to cover the effect hook. The reason why it is called useEffect is that it lets you perform side-effects after component mounts. Those can be loading data from the server, adding a custom window listener, or anything else you would do at that stage.
Basic usage
The most basic usage would be running it each time component renders. Maybe you need to an event listener on an element that recreates each time. If you want to run it after each time component renders, you can use the effect hook and only pass a function as a parameter.
A component is re-rendered each time its state or prop changes. That means in the example above, each time counter value changes, useEffect also executes.
Cleanup
Another thing you could do in the effect hook is subscribing to an API. But that is an action that you would undo when no longer needed. If the hook is triggered each time, you don’t want to have multiple subscriptions run. That is why the function you give to a hook can return function. If you…