Task: Do something after the initial render happens. For instance, log this text ("Hey jorjis, close me β") in the console after every second.
Solution:
import { useEffect} from "react";
const User = () => {
useEffect(() => {
setInterval(() => {
console.log("Hey jorjis, close me β");
}, 1000);
}, []);
return (
<div className="user-card">
<h1>Name: Jorjis</h1>
<h2>Location: Dhaka, Bangladesh</h2>
<p>Contact: speak.jorjis@gmail.com</p>
</div>
);
};
export default User;
WHAT do you think ? Will this code work ? π§
Okay, let's visualize the outcome:
Explanation: Our app requires at least two pages to understand the underlying concept. So, I set up accordingly. Let's zoom in on what's going on here.
- Our code works as we wanted, right?
- There is a glitch. So, When I go from the 'About' page to the 'Contact' page, this function called
setInterval
is supposed to stop, but it doesn't. And then, when I come back to the 'About' page from the 'Contact' page, thesetInterval
function runs faster than before. It's because anothersetInterval
function is scheduled to run. - it will schedule numbers of the
setInterval
function as I navigate back and forth to theabout
page. - which might lead to memory leaks. We need to build our CLEANUP logic to fix it right away.
Corrected Code (functional-component):
import { useEffect} from "react";
const User = () => {
useEffect(() => {
const timer = setInterval(() => {
console.log("Hey jorjis, close me β");
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
return (
<div className="user-card">
<h1>Name: Jorjis</h1>
<h2>Location: Dhaka, Bangladesh</h2>
<p>Contact: speak.jorjis@gmail.com</p>
</div>
);
};
export default User;
Here, I return a callback function from useEffect. The callback function will be invoked after the component is unmounted. And I wrote the cleanUp
logic as the task required.
Now, we'll see how we used to write react code to get this functionality, which refers to refactoring our react code in the class component.
In Class Component:
import {React} from 'react';
class UserClass extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.timer = setInterval(() => {
console.log("Hey jorjis, close me β");
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<div className="user-card">
<h1>Name: Jorjis</h1>
<h2>Location: Dhaka, Bangladesh</h2>
<p>Contact: speak.jorjis@gmail.com</p>
</div>
);
}
}
export default UserClass;
Top comments (0)