{"id":32843,"date":"2024-11-01T09:11:56","date_gmt":"2024-11-01T09:11:56","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32843"},"modified":"2024-11-01T11:21:46","modified_gmt":"2024-11-01T11:21:46","slug":"react-course-everything-about-useeffect","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32843\/","title":{"rendered":"React Course: Everything About useEffect"},"content":{"rendered":"

React is one of the most popular JavaScript libraries for building modern web applications. Among them, the useEffect<\/code> hook plays a very important role in controlling the component’s lifecycle and managing side effects. In this article, we will cover the basic concepts, usage, and various examples of useEffect<\/code> in detail.<\/p>\n

1. What is useEffect?<\/h2>\n

useEffect<\/code> is one of the hooks provided by the React library, used to create side effects in functional components. Side effects include data fetching, manual DOM manipulation, setting timers, or interacting with other external systems.<\/p>\n

React components are designed to only define state and props, but sometimes there is a need to perform other actions when the component is rendered. To perform these actions, we use the useEffect<\/code> hook.<\/p>\n

2. Basic usage of useEffect<\/h2>\n

useEffect<\/code> can be used with the following syntax:<\/p>\n

useEffect(() => {\n  \/\/ Side effect code\n}, [dependency array]);<\/code><\/pre>\n
In the above syntax, the first parameter is the function that performs the side effects, and the second parameter is the dependency array. The dependency array includes the states or props on which this hook depends.<\/p>\n
2.1. Simple example<\/h3>\n
import React, { useEffect, useState } from 'react';\n\nfunction ExampleComponent() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    document.title = `Count: ${count}`;\n  }, [count]);\n\n  return (\n    
\n      
Current count: {count}<\/p>\n