More Hook Fun!

Last time I was looking at React hooks we went over the useState hook. Its a super useful hook and can make code cleaner and more uniform. Now it’s time to look at the other big one in React, useEffect. useEffect is for the side effects that happen when a component has a lifecycle change. Just like useState replaced the need for class components to declare state, useEffect replaces componentDidMount, componentDidUpdate, and componentWillUnmount and has them all work through one API call.

Lets look at this counter I created to demonstrate how it works:

Here is just a simple counter with a button, and as the value of count changes, the document updates its title with the correct value using the useEffect hook.

Effects are declared inside the component and thus have access to props and state. It essentially tells React to run your effect function once the changes to the DOM have been pushed through.

Theres much more you can accomplish with the useEffect hook, but these are the basics and a powerful basic at that!