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/

  • 861