Trung Vo
Trung Vo, web expert with 10 years of experience, Google Developer Expert in Angular, fosters web dev communities and speaks globally, based in Singapore.
useEffect and its
dependency array
Frontend Engineer
Cake Engineering - 03 March 2021
About me
Hi, My name is Trung 😊
- Experienced FE engineer, specialized in branding, interactive application
- Frontend Engineer @cakedefi
- Organizer @Angular Vietnam
- Write, code, and talk about Angular
- Biggest Angular group in APAC
- Advocate and grow the Angular developer community in Vietnam
- 15k members
- Founded in 2017 by
- 100 Days Of Angular series
Agenda
- What is useEffect?
- An example of useEffect has bug 🐛
- Find out the root cause and fix the bug
- Closing notes
Recap
The Effect Hook lets you perform side effects in function components
useEffect(() => {
//effect
return () => {
//cleanup
}
}, [])Recap
A side effect is when a function alters some external state that is not the intended return value.
- Data fetching
- Setting up a subscription
- Manually changing the DOM
Recap
- Need clean up
- Don't need clean up
React always clean up the previous effect before applying the next effect.
Requirements
Demo
Summary
- Every time we re-render, we schedule a new effect, replacing the previous one.
- Whenever the value inside the dependency array changes, React cleans up the previous effect and applies the new one.
Thanks Chee for your support on my React journey 🤓
Thank you!
useEffect and its dependency array
By Trung Vo
useEffect and its dependency array
Deck for Cake Engineering Conference #1 - March 2021 https://www.cakedefi.com/
