{"id":55511,"date":"2022-09-23T14:00:30","date_gmt":"2022-09-23T08:30:30","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55511"},"modified":"2022-09-29T14:13:18","modified_gmt":"2022-09-29T08:43:18","slug":"useeffect-hook-reactjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/useeffect-hook-reactjs\/","title":{"rendered":"useEffect Hook – Reactjs"},"content":{"rendered":"

React Hooks are the feature that was introduced in React version 16.8, allowing us to use state and other class components features in our functional components. Out of all the hooks introduced, there is one salient hook named the UseEffect<\/strong>.<\/span><\/p>\n

The useEffect hook is a boon for the functional components. It basically allows us to execute side effects in our functional components. Side effects here are referring to api calls to the backend server, interacting with browser APIs, i.e. using document or window, and unanticipated timer functions such as setTimeout and setInterval. In short, the side effects are those whose results are in general unpredictable.<\/span><\/p>\n

However, we can perform side effects without using the mentioned hook within the component body itself.\u00a0\u00a0<\/span><\/p>\n

Consider the below example:<\/span><\/p>\n

\"\"<\/p>\n

Here we are making an API call in the document body. It might not throw an error , but would definitely hamper the rendering process, which is why this is not the right technique. We can make use of useEffect for these side effects.<\/span><\/p>\n

Below are the steps to use the UseEffect hook in our functional components:<\/span><\/p>\n