React hooks - useEffect fundamentals

What is an effect?

A side-effect, in short an “effect”, is anything that a function tries to modify outside of its body. It’s not a direct result of its arguments and return value.

In React, most of the effects happen after the DOM is updated ( render ). In class components, these are covered by componentDidMount for the initial render, and componentDidUpdate for each updates, and componentWillUnmount when the component is disposed.

Usual effects include:

  • data fetching
  • subscription to external data sources
  • imperative updates to DOM
  • any sort of cleanup in componentWillUnmount

When using the new Hooks, each effect function goes into the useEffect(effect) .

Full-stack ramblings and journal about anything web