How can I prevent my React component from re-rendering on every state change?

[elitedk52]

Select Topic Area

Question

Body

I'm working on a React component that fetches data from an API and updates its state. However, every time the state changes, the component re-renders, which is causing performance issues.

Here's a simplified version of my component:

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
const [data, setData] = useState(null);

useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data));
}, [data]); // This causes the component to re-render on every state change

return

{data ? data.content : 'Loading...'}

;
};

export default MyComponent;

How can I modify this code to prevent unnecessary re-renders while still updating the state with new data?

[TakahashiSouta2018]

You're encountering unnecessary re-renders because the useEffect hook has data as a dependency. This means the effect runs every time data changes, which leads to a loop of fetching and setting state.

To fix this:

Remove data from the dependency array: This ensures the effect runs only once when the component mounts.

Use useRef to persist data across renders: This can help avoid unnecessary state updates.

Here's an updated version of your component:

import React, { useState, useEffect, useRef } from 'react';

const MyComponent = () => {
const [data, setData] = useState(null);
const hasFetched = useRef(false);

useEffect(() => {
if (!hasFetched.current) {
fetch('/api/data')
.then(response => response.json())
.then(data => {
setData(data);
hasFetched.current = true;
});
}
}, []); // Empty dependency array ensures this runs only once

return

{data ? data.content : 'Loading...'}

;
};

export default MyComponent;

Explanation:

The useEffect hook now has an empty dependency array ([]), meaning it runs only once when the component mounts.

The useRef hook is used to track whether the data has been fetched, preventing multiple fetches.

This approach ensures that your component fetches data only once and avoids unnecessary re-renders, improving performance.