1. Run Only Once
Print "Component Mounted" only once when page loads.
- How will you write useEffect?
- What should be in dependency array? Why?
The dependency array should be an empty array [ ].
An empty dependency array tells React to run the useEffect after the component's initial render, so the effect runs only once when the component is mounted.
2. Run on Every Render
Print "Rendered" on every render.
- How will you write useEffect?
- What happens if dependency array is not provided?
If we don't provide a dependency array, the useEffect will run after every render of the component.
For example, if the component renders 5 times, the useEffect will also run 5 times.
3. Run When State Changes
const [count, setCount] = useState(0);
Log "Count changed" only when count changes.
- What should dependency array contain?
The dependency array should contain the count variable.
This means the useEffect will run whenever the count value changes.
- What happens if it is empty [ ]?
If the dependency array is empty [ ], the useEffect will run only once after the component's initial render.
It will not run again when count changes.
So, if we want the effect to run whenever count changes, we need to put count in the dependency array: [count]
4. Two States, One Effect
const [count, setCount] = useState(0);
const [name, setName] = useState("");
Run effect when count OR name changes.
- How will dependency array look?
The dependency array should contain both count and name:
This means the useEffect will run whenever count changes OR name changes.
- What if only count is added?
The useEffect will run whenever count changes.
Changes to name will not trigger this useEffect because name is not included in the dependency array.
5. Derived Logic
Show "Even Number" whenever count becomes even.
- Should this logic be inside render or useEffect? Why?
The logic is inside useEffect because we want to perform the console log when count changes. The [count] dependency makes the UseEffect to run whenever count changes, and the if condition checks whether the new count is even.
6. API Call on Mount
Fetch users when component loads.
- Why do we use [ ]?
We use an empty dependency array [ ] because we want the API call to run only after the component's initial render
- What happens if we remove [ ]?
If we remove [ ], the useEffect runs after every render. Therefore, the API call will be made after every render, which can cause unnecessary API requests and may lead to performance problems.
7. Infinite Loop Trap
useEffect(() => {
setCount(count + 1);
}, [count]);
- What will happen?
The setCount will increase the count value. Since count is in the dependency array, the useEffect will run again whenever count changes, creating an infinite loop.
- Why does this cause infinite re-render?
Since count is in the dependency array, changing count triggers the effect again, which changes count again, causing an infinite re-render loop.
8. Fix the Infinite Loop
- How can you increment count only once using useEffect?
If we give an empty dependency array [ ], the useEffect will run only once after the initial render. Therefore, setCount will increment the count only once, avoiding the infinite loop.
9. Document Title Sync
useEffect(() => {
document.title = count;
}, [?]);
- What should go inside ? Why?
We should put count inside the dependency array because whenever count changes, the useEffect will run and update the document title with the new count value.
10. Cleanup Basic
useEffect(() => {
window.addEventListener("click", handleClick);
});
- What problem may happen?
Without cleanup, a new click event listener will be added on every render. This can cause the handleClick function to run multiple times for a single click.
- How to fix properly?
- When does cleanup run?
The cleanup function runs before the effect runs again and when the component is unmounted (removed from the screen).
Top comments (0)