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 like an empty array "[ ]" because the empty array run the useEffect when the components 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 the dependency array is not provided, useEffect runs after every render of the component. Therefore, when a state change causes the component to re-render, the useEffect runs again.
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 state variables that the useEffect should watch for changes.
- What happens if it is empty [ ]?
If we give an empty [ ] ,The useEffect will run only once when the first time component is mounted.
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 dependancy array look like an both count and name in the single array "[count , name] ".
- What if only count is added?
If only count is added to the dependency array, the useEffect watches only for changes in count. When count changes, the useEffect runs again. If name changes, this useEffect does not run 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. Infinite Loop Trap
useEffect(() => {
setCount(count + 1);
}, [count]);
- What will happen?
In this the dependancy array has[count],The UseEffect will runs whenever the count variable is changed because the useEffect itself incrementing the change in state(setCount(count+1) ,Therefore the continous loop has created.
- Why does this cause infinite re-render?
The useEffect runs whenever count changes because count is in the dependency array. Inside the useEffect, setCount(count + 1) changes the count state. This causes the component to re-render. Since count changed, the useEffect runs again and changes count again. This process repeats continuously, causing an infinite loop.
7. Fix the Infinite Loop
- How can you increment count only once using useEffect?
If we give an empty dependency array "[ ]" means it runs only once and inside the useEffect the setCount(count +1) changes the state therefore the useEffect run and the initial value is increment only once.
8. Document Title Sync
useEffect(() => {
document.title = count;
}, [?]);
- What should go inside ? Why?
The dependency array should contain [count] because the useEffect runs every state of change in count and inside the useEffect the document.title were mounted to count there the result of the count is displayed in the document.title .
9. Cleanup Basic
useEffect(() => {
window.addEventListener("click", handleClick);
});
- What problem may happen?
The event listener is added after every render, so handleClick may be called multiple times for a single click.
- How to fix properly?
- When does cleanup run?
Cleanup runs when the component is unmounted.
10. 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 once 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.
Top comments (0)