How to setParams using useEffect and avoid getting infinty renderings?

In React, the useEffect hook is used to execute side effects after component rendering, such as making network requests or manually modifying the DOM. Properly using the useEffect hook and avoiding unnecessary re-renders primarily involves two aspects: properly setting the dependency array and correctly handling side effect cleanup.

Properly Setting the Dependency Array

The second parameter of useEffect is the dependency array, which determines when useEffect re-executes. If your effect depends on certain external variables or props, these dependencies should be included in the array. Otherwise, you may encounter issues with outdated data, leading to inaccurate or incorrect rendering.

Example:

jsx
const [data, setData] = useState(null);
const [userId, setUserId] = useState(1);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`https://api.example.com/data/${userId}`);
    const result = await response.json();
    setData(result);
  };

  fetchData();
}, [userId]); // Dependency array includes userId

Here, useEffect re-executes only when userId changes, ensuring that the displayed data is always up-to-date when the user ID changes.

Correctly Handling Side Effect Cleanup

Some side effects need to be cleaned up before the component unmounts or dependencies change to avoid memory leaks or unnecessary operations. For example, if you subscribe to certain events within useEffect, you should cancel these subscriptions in the cleanup function.

Example:

jsx
useEffect(() => {
  const handleResize = () => {
    console.log('Window resized');
  };

  window.addEventListener('resize', handleResize);

  // Cleanup function
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Empty dependency array means effect runs only once on mount

In this example, we add a window resize event listener and remove it when the component unmounts, preventing the event handler from executing after the component is unloaded.

Properly using useEffect with the correct dependency array and appropriately handling cleanup when necessary is key to ensuring React components render correctly and efficiently. By implementing these measures, we can avoid unnecessary re-renders and potential performance issues.