Either one of those can be utilized to do principally the similar factor, however they have got moderately
other use circumstances. So listed here are some laws so that you can believe when deciding
which React Hook to make use of.

99% of the time that is what you need to make use of. When hooks are strong and if you happen to
refactor any of your magnificence elements to make use of hooks, you’ll be able to most probably transfer any code
from componentDidMount, componentDidUpdate, and componentWillUnmount to
useEffect.

The only catch is this runs after react renders your part and
guarantees that your impact callback does now not block browser portray. This differs
from the habits in school elements the place componentDidMount and
componentDidUpdate run synchronously after rendering. It is extra performant
this manner and as a rule that is what you need.

Then again, in case your impact is mutating the DOM (by way of a DOM node ref) and the
DOM mutation will trade the illusion of the DOM node between the time that it
is rendered and your impact mutates it, then you definately do not wish to use
useEffect. You will want to use useLayoutEffect. Differently the person may just see
a flicker when your DOM mutations take impact. That is just about the one
time you need to keep away from useEffect and use useLayoutEffect as a substitute.

This runs synchronously right away after React has carried out all DOM mutations.
This can also be helpful if you wish to have to make DOM measurements (like getting the scroll
place or different types for a component) after which make DOM mutations or
cause a synchronous re-render via updating state.

So far as scheduling, this works the similar manner as componentDidMount and
componentDidUpdate. Your code runs right away after the DOM has been up to date,
however ahead of the browser has had a possibility to “paint” the ones adjustments (the person
does not in truth see the updates till after the browser has repainted).

• useLayoutEffect: If you wish to have to mutate the DOM and/or do want to
  carry out measurements
• useEffect: If you do not want to engage with the DOM in any respect or your DOM
  adjustments are unobservable (significantly, as a rule you need to use this).

One different state of affairs chances are you’ll wish to use useLayoutEffect as a substitute of
useEffect is in case you are updating a worth (like a ref) and you need to make
positive it is up-to-date ahead of some other code runs. As an example:

const ref = React.useRef()
React.useEffect(() => {
  ref.present = 'some worth'
})

// then, later in some other hook or one thing
React.useLayoutEffect(() => {
  console.log(ref.present) // <-- this logs an outdated worth as a result of this runs first!
})

So in eventualities like that, the answer is useLayoutEffect.

It is all about defaults. The default habits is to let the browser re-paint
in keeping with DOM updates ahead of React runs your code. This implies your code may not
block the browser and the person sees updates to the DOM quicker. So stick to
useEffect as a rule.