React interview question: what’s the difference between useEffect and useEffect?

Since react16.8, hooks have been used by more and more people, and inevitably will be asked in interviews. What is the difference between useEffect in hooks and useEffect? This question is often encountered in the interview, today we will explore.

First, let’s take a lookThe react websiteHere’s how:

Effect scheduled with useEffect does not block the browser update screen, making your application seem more responsive. In most cases, effects do not need to be executed synchronously. In individual cases (such as measuring layout), there is a separate useLayoutEffect Hook for you to use, with the same API as useEffect.

That is, useEffect is executed asynchronously, whereas useLayoutEffect is executed synchronously and blocks browser updates to render.

So what’s the difference between the two?

1. The similarities

The official documentation for hooks defines useLayoutEffect as follows:

Its function signature is the same as useEffect, but it calls Effect synchronously after all DOM changes. You can use it to read DOM layouts and trigger rerenders synchronously. The update schedule inside useLayoutEffect is refreshed synchronously before the browser performs the drawing.

So let’s look at how the source code defines these two functions:

useEffect(
   create: () = > (() = > void) | void.deps: Array<mixed> | void | null,
 ): void {
   currentHookNameInDev = 'useEffect';
   mountHookTypesDev();
   checkDepsAreArrayDev(deps);
   return mountEffect(create, deps);
 },

function mountEffect(
	  create: () => (() => void) | void,
	  deps: Array<mixed> | void | null.) :void {
	  if (__DEV__) {
	    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
	    if ('undefined'! = =typeofjest) { warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber); }}return mountEffectImpl(
	    UpdateEffect | PassiveEffect | PassiveStaticEffect,
	    HookPassive,
	    create,
	    deps,
	  );
	} 

useLayoutEffect(
   create: () = > (() = > void) | void.deps: Array<mixed> | void | null,
 ): void {
   currentHookNameInDev = 'useLayoutEffect';
   mountHookTypesDev();
   checkDepsAreArrayDev(deps);
   return mountLayoutEffect(create, deps);
 },
 
function mountLayoutEffect(
	  create: () => (() => void) | void,
	  deps: Array<mixed> | void | null.) :void {
	  return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
        }

Copy the code

You can see that both functions end up calling the same function named mountEffectImpl with the same input arguments and return the same value, so the signature of the function is the same.

As for which one to use, we recommend you start with useEffect and only try Using useLayoutEffect if it doesn’t work.

2. The difference between

Best practice in the React community is that you can use useEffect directly in most situations, but it is recommended to use use elayouteffect if your code causes a page flicker that causes components to suddenly change position, color, or other effects. To sum up, useLayoutEffect is more recommended if you have scenarios that directly manipulate DOM styles or cause DOM style updates.

To sum up:

Their common point is very simple, the underlying function signature is completely the same, are called mountEffectImpl, there is no difference in use, basically can be directly replaced, are used to deal with side effects.

UseEffect is called asynchronously during React rendering and is used in most scenarios, while LayoutEffect is called synchronously after all DOM changes and is mainly used to handle DOM manipulation, style adjustments, avoiding page flickering, etc. Because of synchronous processing, LayoutEffect needs to avoid blocking by doing time-consuming tasks that are computationally expensive.

In the future, the two apis will coexist for a long time. There is no plan to cut or merge them at the moment. Developers need to choose according to the scenario. The React team’s advice is very practical. If you are really confused, useEffect first. If the page is abnormal, replace it with useLayoutEffect.

Reference:

1. The react Chinese website
2. What is the difference between useEffect and useEffect?