Home   reactjs  

useEffect and dependency Array

When an empty dependencies array ([]) is passed to useEffect, it ensures that the effect only runs once, after the initial render, and not on every render. This is a common pattern for running side effects that should only occur when the component mounts (e.g., fetching data, setting up subscriptions, etc.).

Here’s a detailed explanation:

useEffect with Empty Dependency Array

useEffect(() => {
  // Effect code here
}, []);

Behavior

  1. Initial Render:

    • The effect runs after the initial render.
    • This means the code inside useEffect is executed once when the component is first mounted.
  2. Subsequent Renders:

    • The effect does not run on subsequent renders.
    • The empty array ([]) tells React that the effect does not depend on any values from props or state, so there’s no need to re-run the effect.

Example

Here’s an example demonstrating this behavior:

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('useEffect called');
  }, []); // Empty array as dependency

  console.log('Rendering App');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Output

  1. On initial render, you will see:

    Rendering App
    useEffect called
    
  2. On subsequent renders (e.g., after clicking the "Increment" button), you will only see:

    Rendering App
    

The useEffect message appears only once after the initial render.

Comparison: No Dependency Array

If you omit the dependencies array, useEffect runs after every render:

useEffect(() => {
  console.log('useEffect called');
});

In this case, the effect runs after every render, meaning the message useEffect called would appear every time the component re-renders, including when the "Increment" button is clicked.

Points to remember

Published on: Jul 05, 2024, 05:41 AM  
 

Comments

Add your comment