Here are the three scenarios: 1- No dependency array >> code inside useEffect runs every time your component re-renders. 2- Empty dependency array >> code inside your useEffect only runs once when your component first mounts. 3- Not-empty dependency array >> code inside your useEffect runs every time any variables you put inside the dependency array change. The last part isn't exactly accurate. You components also needs to re-render. so if your put a state or a prob inside your dependency array, your component will re-render and the useEffect will run. However, if you put some kind of a const or locally defend variable that doesn't trigger a re-render when it's changed, the useEffect will only fire again with the next re-render. Answer from ritwal on reddit.com
Medium
medium.com › @jsdevspace › understanding-reacts-useeffect-dependency-array-b55a411d2fec
Understanding React’s useEffect Dependency Array | by Jsdevspace | Medium
October 16, 2025 - This predictable cycle ensures your component’s side effects are always in sync with the rendered state. useEffect’s dependency array isn’t just syntax — it’s a contract between your component and React.
React
react.dev › reference › react › useEffect
useEffect – React
It should return a cleanup function with cleanup code that disconnects from that system. A list of dependencies including every value from your component used inside of those functions.
Videos
02:33
React useEffect & object dependencies - 4 approaches to avoid ...
19:14
#17 React useEffect Hook Simplified with examples - YouTube
01:00
Mastering useEffects: Avoid Functions as Dependencies - YouTube
00:54
Mastering useEffects: Arrays and Objects as Dependencies - YouTube
DEV Community
dev.to › codedsalis › understanding-react-useeffect-hooks-dependency-56nh
Understanding React useEffect hook's Dependency - DEV Community
February 3, 2023 - According to the React documentation, useEffect is a React Hook that lets you synchronize a component with an external system and it's syntax is: ... setup is a callback function where you define your logic and dependencies?
Reddit
reddit.com › r/reactjs › can someone explain useeffect dependency arrays like im 5?
r/reactjs on Reddit: Can someone explain useEffect dependency arrays like im 5?
April 24, 2022 -
When do you need to use it? Why do I need to put a empty array even though its empty? When would I put something in the empty array?
Sorry if stupid noob question.
Top answer 1 of 7
51
Here are the three scenarios: 1- No dependency array >> code inside useEffect runs every time your component re-renders. 2- Empty dependency array >> code inside your useEffect only runs once when your component first mounts. 3- Not-empty dependency array >> code inside your useEffect runs every time any variables you put inside the dependency array change. The last part isn't exactly accurate. You components also needs to re-render. so if your put a state or a prob inside your dependency array, your component will re-render and the useEffect will run. However, if you put some kind of a const or locally defend variable that doesn't trigger a re-render when it's changed, the useEffect will only fire again with the next re-render.
2 of 7
1
If you use mobx, you can use an autorun() which is like useEffect but smart enough to detect its own dependencies - and always the right ones! For example: useEffect(() => autorun(() => { if (store.foo) { // Will run if foo changes } else if (store.bar) { // Will run if bar changes } }, []) What's perhaps most amazing about above is that if foo is truthy but bar changes, this code won't rerun(!) as bar didn't need to be accessed last time through the autorun. Mobx is amazing. Trying to get every f-ing dependency right in useEffect() is not.
Medium
medium.com › @navneetskahlon › understanding-the-useeffect-dependency-array-in-react-a-comprehensive-guide-7da9411c90b3
Understanding the useEffect Dependency Array in React: A Comprehensive Guide | by Navneet Singh | Medium
June 20, 2023 - It allows us to perform tasks such as data fetching, subscriptions, or DOM manipulation. The useEffect hook takes an optional second argument called the dependency array, which controls when the effect should run.
Bitstack
blog.bitsrc.io › understanding-dependencies-in-useeffect-7afd4df37c96
Understanding Dependencies in useEffect | Bits and Pieces
March 4, 2025 - Case 2. Not so easy. So we have dependencies, but the code should only run once. Again, this might be a code smell, so you should try to refactor first. Dan’s Complete Guide to useEffect has a few tips for that.
DEV Community
dev.to › usama_dev › understanding-the-useeffect-dependency-array-553h
Understanding the useEffect Dependency Array - DEV Community
December 26, 2025 - So useEffect does not cause rendering directly It reacts to rendering caused by state/prop updates. After watching a long lecture and thinking deeply, I finally understood that the dependency array is React’s way of knowing when to run an effect again. The values inside it are usually state or props because those values can change.
W3Schools
w3schools.com › react › react_useeffect.asp
React useEffect
There are several ways to control when side effects run. We should always include the second parameter which accepts an array. We can optionally pass dependencies to useEffect in this array.
Top answer 1 of 2
3
If you use inside your useEffect some functions/variables that are declared outside of the useEffect , then you would have to add it as a dependency in case it might change.
External variables that are used inside of useEffect should be inculded in the dependency array, and your functions are defined outside of it, so that's the reason it's warning you.
Though there are some exceptional cases when you don't have to add everything.
For example, if you call setState method inside useEffect, it doesn't have to be inculded in the dependency array (because React will make sure this function won't change).
Read more about what to add to the dependencies here: https://devtrium.com/posts/dependency-arrays
2 of 2
1
If your functions or methods are going to be called only for one time then it's better to declare and invoke the function in the same useEffect hook.
For Example:-
useEffect(() => {
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const getCurrentDate = () => {
let date = new Date();
setDate(date.toLocaleDateString("en-us", options));
};
getCurrentDate();
}, []);As the above code shows try to include the functions or methods inside your useEffect hook or else if you want to try to add some dependency which can be variable that when that changes your useEffect will trigger again.
Medium
medium.com › @joabi › react-patterns-optimization-of-dependency-array-in-useeffect-b551d172fc76
React Patterns: Optimization of Dependency Array in useEffect | by Julie J. | Medium
November 4, 2023 - This is because React uses a concept called “referential equality” when it comes to objects in the dependency array. What this means is that we can’t be sure if the object’s reference will remain the same between re-renders. So, even if the content inside the object hasn’t changed, React may still think it’s a different object and trigger the effect to run again. Our goal should be to reduce how often the object’s reference changes. import { useEffect, useState } from "react"; function Expense(props) { useEffect(() => { console.log("Run effect when date changed"); }, [props.date]
Overreacted
overreacted.io › a-complete-guide-to-useeffect
A Complete Guide to useEffect — overreacted
March 9, 2019 - By adding this dependency, we’re not just “appeasing React”. It makes sense to refetch the data when the query changes. The design of useEffect forces you to notice the change in our data flow and choose how our effects should synchronize it — instead of ignoring it until our product users hit a bug.
JavaScript in Plain English
javascript.plainenglish.io › 7-react-useeffect-dependency-traps-that-secretly-destroy-your-app-performance-and-how-to-fix-them-18d09a5a36cd
7 React useEffect Dependency Traps That Secretly Destroy Your App Performance and How to Fix Them | by Nithin Bharadwaj | JavaScript in Plain English
October 21, 2025 - I’ve been building React applications for years, and recently, I hit a wall with an app that felt sluggish despite my best efforts. After hours of profiling, I discovered the culprit was hiding in plain sight: the dependency arrays of my useEffect hooks. These tiny lists can silently sabotage your app’s performance if not handled carefully.
DEV Community
dev.to › cassidoo › when-useeffect-runs-3pf3
When useEffect runs - DEV Community
June 4, 2024 - If it has a variable in it, then useEffect is called when that variable changes · If that dependency array is populated, you can think of the useEffect function as staying "in sync" with the variables in the array.
DhiWise
dhiwise.com › post › understanding-the-importance-of-the-useeffect-dependency-array-in-react
UseEffect Dependency Array: Best Practices For React ...
August 13, 2025 - What is the Dependency Array in useEffectEmpty Dependency ArrayHow the Dependency Array Works in the Render CycleWhy You Get Missing Dependency WarningsCommon Dependency Array Mistakes and FixesEmpty Array vs No ArrayThe Role of Cleanup FunctionState Variables and Re RendersAdvanced: Functions and Objects in Dependency ArrayData Fetching Example with Custom HookESLint Rule: React Hooks Exhaustive DepsAvoiding Infinite Loops in EffectsWorking with Async Function in useEffectWhen to Omit DependenciesKeeping Effects on Track with the UseEffect Dependency Array
GeeksforGeeks
geeksforgeeks.org › reactjs › what-are-the-dependencies-in-useeffect-and-why-are-they-important
What are the dependencies in useEffect and why are they important? - GeeksforGeeks
July 23, 2025 - import React, { useState, useEffect } from 'react'; import axios from 'axios'; function CombinedExample() { const [data, setData] = useState(null); const [timer, setTimer] = useState(0); // Fetching data when the component mounts useEffect(() => { axios.get( 'https://fakestoreapi.com/products' ) .then(response => setData(response.data)) .catch(error => console.error('Error fetching data:', error)); }, []); /* Empty dependency array means this effect runs only once, when the component mounts */ // Subscribing to keydown event useEffect(() => { const handleKeyPress = (event) => { console.log('Ke
YouTube
youtube.com › watch
#18 React useEffect Hook with Object Dependency - YouTube
When working with the useEffect hook, you want to be careful of using objects as dependencies. That's because, even when the structure of your objects don't ...
Published February 4, 2024
YouTube
youtube.com › watch
Full React Tutorial #15 - useEffect Dependencies - YouTube
Hey gang, in this React tutorial we'll talk about how we can control when the useEffect function fires - by using a dependency array.🐱💻 🐱💻 Course Files...
Published January 7, 2021
React
legacy.reactjs.org › docs › hooks-reference.html
Hooks API Reference – React
Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render. Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.
React
react.dev › learn › removing-effect-dependencies
Removing Effect Dependencies – React
It is important to declare it as a dependency! This ensures, for example, that if the roomId changes, your Effect will re-connect to the chat with the new options. However, there is also a problem with the code above.
Hygraph
hygraph.com › blog › react-useeffect-a-complete-guide
React useEffect() - A complete guide | Hygraph
January 21, 2026 - These side effects are tasks outside ... A callback function that contains the side effect logic. An optional array of dependencies that controls when the effect runs....