Overview

Note with examples to illustrate the use cases of functions, hooks in react.

This repo also includes the common problems when working with react and how to solve those problems.

When to use useEffect() and useLayoutEffect()

Statement about useEffect() from React documentation:

However, not all effects can be deferred. For example, a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency.

For these types of effects, React provides one additional Hook called useLayoutEffect

This section shows you the example that will illustrate exactly what the above statement means.

Visual inconsistency

Explaination:

Also check the code here.

With useEffect(), the effect of making 🟢 color is defered after paint. So browser will paint the 🔴 color first and then the effect takes place afterward.

With useLayoutEffect() the effect of making 🟢 color is not deferred. Before the browser has a chance to paint, the effect is taken place already.

** If the effect you put in the useLayoutEffect() is slow and take long time to process, this will result in UI blocking (not render until your effect computation is done). So you need to evaluate your problem before implemeting the solution.