Lifecycle hooks and useEffect-1

 Here's the corrected document:

Lifecycle Methods:

When we perform tasks like:

 * Component loads

 * Component updates

 * Component unmounts

Class-based Components:

We have:

 * componentDidMount

 * componentDidUpdate

 * componentWillUnmount

Functional-based Components:

We use the useEffect hook.

We need to pass dependencies:

 * If passing an empty dependency array ([]), it will work as componentDidMount.

 * If passing dependencies, it works as componentDidUpdate.

 * If we pass a return keyword, it works as componentWillUnmount.

Definition of useEffect:

useEffect is React's solution for handling side effects in functional components. It allows your component to perform actions that go beyond just rendering UI. This means that the primary job of a React component is to display something on the screen.

What are Side Effects?

Actions that go beyond just rendering UI are called side effects.

Examples of Side Effects:

 * Fetching data from an API: Your component needs information from a server. Displaying this data is rendering, but getting the data involves a network request.

 * Manipulating DOM directly: Sometimes for integrating 3rd party libraries or working with the DOM after a render.

 * Updating the browser title: Changing the text that appears in the browser tab (e.g., from "React App" to "My App") isn't part of the component's visible UI, but it affects the browser.

 * Setting up event listeners: If your component needs to react to global keyboard presses or mouse clicks outside of its boundaries, it needs to listen to those events.

 * Interacting with timers:  (setTimeout, setInterval): Scheduling delayed actions or recurring tasks that aren't part of the instant visual render.

 *  Logging to the console: Even simple debugging like console.log is a side effect as it interacts with the browser's tools. Or ( An interaction with the browser's developer tools that is external to the displayed UI.)