What is the use of use Effect in React JS?

  Quality Thought – Best React JS Training Institute in Hyderabad with Live Internship Program

Looking to master React JS and kickstart a successful career in front-end development? Look no further than Quality Thought, the premier React JS training institute in Hyderabad. With a proven track record of training thousands of tech professionals, Quality Thought stands out for its industry-oriented curriculum, expert trainers, and a unique live internship program that bridges the gap between learning and real-world application.

React JS is one of the most in-demand front-end libraries today, powering user interfaces at companies like Facebook, Instagram, Netflix, and Airbnb. At Quality Thought, students are not only taught the fundamentals of React—including components, JSX, state management, routing, hooks, and integration with REST APIs—but also gain exposure to advanced topics such as Redux, React Context, and performance optimization techniques.

What truly sets Quality Thought apart is its live internship program, a rare offering among training institutes in Hyderabad. This program allows students to work on real-time projects under industry mentorship, simulating the experience of working in a software company. From task management using tools like Git and JIRA, to team collaboration in agile environments, students gain the practical skills employers are looking for.

In React, the **useEffect** hook is used to perform side effects in functional components. Side effects are operations that affect something outside the scope of the function being executed, such as:

Fetching data from an API

Updating the DOM directly

Setting up subscriptions or timers

Logging

Interacting with local storage

✅ Purpose of useEffect in React JS:

Run code after render:

useEffect runs after the component renders, making it ideal for tasks like data fetching or interacting with the DOM.

Control when effects run:

You can specify dependencies to control when the effect re-runs:

jsx

Copy

Edit

useEffect(() => {

  console.log('Effect runs');

}, [dependency]); // Runs only when 'dependency' changes

Cleanup:

You can return a function from useEffect to clean up resources (like event listeners or timers) when the component unmounts or before the effect re-runs:

jsx

Copy

Edit

useEffect(() => {

  const timer = setInterval(() => console.log('Tick'), 1000);

  return () => clearInterval(timer); // Cleanup

}, []);

📌 Basic Syntax:

jsx

Copy

Edit

useEffect(() => {

  // Side effect logic here

}, [dependencies]);

If you pass an empty array [], the effect runs once (like componentDidMount).

If you omit the array, it runs after every render.

If you include dependencies, it runs when those values change.

🧠 In Summary:

The useEffect hook in React is essential for handling side effects in functional components. It provides a clean and controlled way to synchronize your component with external systems, like APIs, browsers, or global state, while also supporting proper cleanup and optimization.

Read More

What is the virtual DOM in React used for?

Visit QUALITY THOUGHT Training Institute in Hyderabad