React has added a new feature named Effect Hooks. So what’s the effect hooks and why were they needed. Effect Hooks allows programmer to use some of the React’s class properties (state and others) without actually extending it, in function component. React class comes with a lot of features but mostly we need is state, props and side effect functions (e.g componentDidMount, componentDidUpdate and componentWillUnmount)
React introduces useState, useEffect and useLayoutEffect as side effect or effect hooks. What it does is that with useState, one can use something like state in function component and with useEffect one can rely on it as it runs on every render and re-render and also capable of doing cleanup, meaning that in useEffect function, accepts two arguments, first a function, that define what should be done on componentDidMount and on componentDidUpdate and should return a function that should supposed to be run on componentWillUnmount for cleanup. Next argument is an array that would probably takes props/state, on which changes, useEffect should be called
For sake of simplicity, lets look at basic example using side effect hooks
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `${count} click(s)`;
});
return (
<div>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Let’s look at the example above. We import useState and useEffect from react. useState(0) is a function that returns two values, first is counter that would be changed and second a function that can be used to alter first variable, in this case count. Calling useState(0), initializes count state with 0
On next line we call function, useEffect, that takes two argument as explained earlier, but in this case we are passing just one argument, a function to be called on render and re-render.
Now since our useEffect is using count variable set above, whenever it detects a change in that, it would run that clouser, updating document title.
On next code block, we are just binding a button’s onClick to a function that would in turn calls setCount; increasing or changing the count variable. So click on that button will run useEffect
React’s side effects hooks are useful, it could do some more complex tasks than just setting a document title
Without sideEffect Hooks
If we would like to see what our example function component has done without extending from reacts class
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
document.title = `${this.state.count} click(s)`;
}
componentDidUpdate() {
document.title = `${this.state.count} click(s)`;
}
render() {
return (
<div>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Do we see the difference that effect hooks make to the code. More over, useEffect is within function component scope, it lets programmer use state/prop right from the effect, and that’s without using any react specific heavy api’s like state
Note useEffect run are not synchronous and also they do not block the browser from updating, hence it feels more responsive
About The Author
I am Pankaj Baagwan, a System Design Architect. A Computer Scientist by heart, process enthusiast, and open source author/contributor/writer. Advocates Karma. Love working with cutting edge, fascinating, open source technologies.
To consult Pankaj Bagwan on System Design, Cyber Security and Application Development, SEO and SMO, please reach out at me[at]bagwanpankaj[dot]com
For promotion/advertisement of your services and products on this blog, please reach out at me[at]bagwanpankaj[dot]com
Stay tuned <3. Signing off for RAAM