7^th Practical Class:
useEffect

React Component Lifecycle

hook

• 👉 useEffect in Docs

Effect on Mount

Effect on Mount & Update

Whenever the values in the dependency array change, the effect is re-run.

Effect Cleanup

React will call your cleanup function each time before the effect runs again, and one final time when the component unmounts (gets removed).

Unmount

After Update & Unmount

Behavior inside

👉 <StrictMode> in Docs

• components will re-render an extra time to find bugs caused by impure rendering
• components will re-run effects an extra time to find bugs caused by missing cleanup

Quacker Demo

• TopNavigation.tsx
• ScrollToTop.tsx

Resources

• Synchronizing with Effects
• You Might Not Need an Effect
• Controlling a non-React widget