Reacts “useEffect” Hook
So far in my React journey I’ve came across certain features that allow more simplicity and less code. Each and every time I come across the implementation of a React hook it draws me in to want to understand them and know more about why they are used. Using React’s hooks allows you to use state and other features without writing a class. When I first came across “useEffect” I wasn’t exactly sure what it was doing. That was until I started reading the documentation which I found to be interesting and really easy to understand. Today we’ll be going over React’s useEffect() hook.
The naming says it all in using it as an “effect” of. Those can be many different effects whether it be a fetch request, direct DOM manipulation, state changes and many more. It is similar to the lifecycles “componentDidMount”, “componentDidUpdate”, and “componentWillUnmount” where as the effect is taken place after the DOM has updated. Below is an example of the hook’s usage.
Here we have a functional component that has a counter. When clicking on the button the counter increases using the useState() hook. When the component has finished rendering the useEffect() hook will execute. Within my useEffect, after the update has occurred, I’m updating the document title (web page title) using the browser API. So what this does is increments the counter within functions return value and right after thats done updating it will increment in the tab of that window. Now the useEffect() hook accepts 2 arguments: a callback, and it’s dependancies.
Above the useEffect() will execute every time the page is rendered. Sometimes we don’t want to do this so we add a dependency to it as such.
The second parameter is an empty array in which what will happen is the useEffect() hook will only be used once after the initial rendering of the DOM. Now clicking the button will increment the counter within the functions return value. The document.title will never change after the initial render because of the empty array dependency.
We can change that by adding the state within the array itself. So that whenever there is state change to “count” the useEffect() will run and in turn updating the document.title with the state value…..
This is just one of many examples of the useEffect() hook. You can use it in many other ways combining the lifecycle methods. Now if you are as curious as I’m sure most React users are you will explore the benefits such as I did and still currently am! It’s fascinating how the React community created solutions such as hooks making our code more readable! Thank you for reading! :)
Below is a list of resources….
