diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index da310c76251..e3dee440e97 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -1416,6 +1416,24 @@ button { margin-left: 5px; } + + +**Avoid placing objects or arrays**, defined inside the component directly into the dependency array. Because _non-primitive values_ receive a new reference on every render, this will cause your Effect to re-run unnecessarily, leading to _performance issues or infinite loops._ + +```js {4} + +function ChatRoom() { + useEffect(()=>{ + // ... + }, [{ limit: 10 }]) +} + +``` + +To use the non-primitives values in the dependency array try using `useMemo()` hook or moving them outside the component, see the section on **[Removing unnecessary object dependencies.](/reference/react/useEffect#removing-unnecessary-object-dependencies)**. + + + --- ### Updating state based on previous state from an Effect {/*updating-state-based-on-previous-state-from-an-effect*/}