Search for a command to run...
I am a developer from India with a good eye for frontend logic and design. I am also well acquainted with the backend and business logic so that's add to my ability to create a good frontend while making it easily integratable with backend.
Hello Ashish, I have a question. Do I need to use UseEffect when I have something like this: const [name, setName] = useState(props. data. name) Here, from proprs I get the fetched data from a database... For example, when I console.log(name), it shows the data two times. Thank you in advance. Anna
Hey Anna if you are fetching the data from the database when the component mounts, that's when you use the useEffect hook but in your case, the data is being passed as a prop to the component where I don't see any point of using the useEffect.
Do let me know if it helps or if you still have any issues. I would love to help.
Thank you for your feedback.
understanding basic are very critical , thanks for explaining in such way.
I am really glad you find it informative.
Thank you very much heaust. I am happy that you liked it.
In this series, you will be learning about everything i have to offer in Reactjs, from your first Hello World to large Scalable websites.
Tailwind CSS is one of the best CSS frameworks out there and working with utility classes I just amazing for quick projects. But there is a whole down part to this is you have to create your own component from scratch. So here I am teaching you how t...
Understanding and Reading the MNIST Dataset
In the digital age, where data breaches are as common as coffee spills, one cryptographic algorithm stands out for its robustness in securing our passwords: bcrypt. Let's dive into the world of bcrypt hashing, uncovering its mechanics, the role of sa...
In our daily used language, we use Grammar, similarly, in computer language, we have a set of rules called grammar on which a language is defined. In this article, we will look into what those Grammars are and how we define and use them. Exploring th...
Introduction In the vast landscape of computer science, languages are not just confined to human communication; they also extend into the realm of formal languages, classified into regular and non-regular categories. Understanding these languages is ...
Hello Guys, welcome back to my blog. Today we will be creating our small server and React app to learn about Server-Sent Events and how to handle them in a React App. But before we even start building anything let's learn about Server-Side Events (SS...
React 16.8 comes bearing with gifts such as Hooks and React community couldn't be happier and why won't they be as Hooks gives the developer to create functional components with the power of Class components.
But do you really understand them? Let's talk about the Effect Hook in this article and we will try to understand when and how to use them.
As mentioned in the document
The Effect Hook lets you perform side effects in function components
let's talk about what are these side effects? Imagine you are making a web app where you are needed to fetch some data from the server or set up a subscription using WebRTC these are some examples of side effects.
In the above example where you are fetching some data from API does not need cleanup means you can execute the function and forget about it. But the later one where you are subscribing needs the cleanup where you have to write some addition line so that every time your component unmounts the cleanup happens and your resources are not wasted up.
For using Effects in our React functional component we use useEffect Hook
useEffect (()=>{
console.log("Something Happened")
})
Now useEffect accepts two arguments one is a callback function and one is an array.
In this, we won't pass the second argument, and let's see what happens.
useEffect (()=>{
console.log("Something Changed")
})
Result: Every time our components render the useEffect Hook gonna run and we can see the text Something Changed in the console.
In this, we will pass an empty array as the second argument [ ], and let's see what happens.
useEffect (()=>{
console.log("Only Once")
},[ ])
Result: This time useEffect Hook gonna run on mounting/ unmounting of our component and we can see the text Only Once in the console for only one time.
In this, we will pass an array containing a state value as the second argument [ someState], and let's see what happens.
const [someState , setSomeState] = useState();
useEffect (()=>{
console.log("State Changed")
},[someState ]);
Result: This time useEffect Hook gonna run when the value of the someState changes of our component and we can see the text State Changed in the console when we change the state.
Above all cases are used in this Play around with the code to get to know more about the useEffect.
These are tricky ones, we already have seen the examples of hooks with clean up but let's see the code part which is provided in an official document, and try to understand it.
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
As you can see we are returning a function this is called clean up function. This is an optional cleanup mechanism for effects so that when your component had been unmounted from the DOM tree it also unsubscribes to the FriendStatus. As we already know that effects run with every render so this is important to clean up from the previous render also.
So, we learned three ways how useEffect can be used and we also learned that some effects need cleanups while others don't.
If you learned something or liked my content follow me on Twitter.
or
follow me on Hashnode Ashish maurya