asked 2 months ago
2
7.8K
My component keeps re-rendering infinitely. Here's a simplified version:
function MyComponent({ onUpdate }) {
const [data, setData] = useState(null);
useEffect(() => {
fetchSomething().then(setData);
onUpdate(data);
}, [onUpdate, data]);
}I think the issue is with onUpdate but I'm not sure. What are the rules for the dependency array?
The rule that helped me most: every value that is used inside an effect and can change over time must be in the dependency array. If adding it causes a loop, the loop is revealing a design problem.
In your case: data is updated inside the effect, and you're also depending on data — that's the loop. Separate the concerns into two effects as shown above.
66
1
Your problem is that onUpdate is likely a new function reference on every render (if the parent defines it inline: onUpdate={() => ...}). React compares dependencies by reference, so a new function = new dependency = re-run effect = state change = re-render = repeat.
Fix options:
onUpdate in useCallback in the parent — best if you control the parentexhaustive-deps rule — it catches these issues at compile timeonUpdate being in the dependency array is a design smell. Consider calling it separately:useEffect(() => {
fetchSomething().then(setData);
}, []); // fetch once
useEffect(() => {
if (data !== null) onUpdate(data);
}, [data]); // only call onUpdate when data actually changes1
17
1