UseMemo and useEffect execution order in React

During the rendering of React components, the execution order of useMemo and useEffect is different. Specifically:

• useMemo is executed first: useMemo is executed in the rendering stage. Its function is to cache the calculation results and ensure that the cached values ​​can be used directly during the rendering process.
• Execute after useEffect: useEffect is executed in the submission stage. Its function is to deal with side effects (such as data acquisition, DOM operations, etc.), and it is run after the DOM is updated.

Detailed execution order

Component rendering stage:

• React calls the component's rendering method (function body of a function component or render method of a class component).
• During rendering, useMemo will be executed, computed and cached.
• If the dependency does not change, useMemo will directly return the cached value to avoid repeated calculations.

DOM update phase:

• React applies the rendering results of the component to the DOM and updates the UI.

Submission phase:

• After the DOM update is complete, React executes the side effect function in useEffect.
• If useEffect has a cleanup function (the returned function), it will be executed when the component is unloaded or the dependency changes.

Sample code

import React, { useMemo, useEffect, useState } from 'react';
function MyComponent({ a, b }) {
  // useEffect written on useMemo  useEffect(() => {
    ('useEffect: Side effect after DOM update');
    return () => {
      ('useEffect: Cleanup');
    };
  }, [a, b]);
  // useMemo is written below useEffect  const memoizedValue = useMemo(() => {
    ('useMemo: Calculating expensive value...');
    return a + b;
  }, [a, b]);
  ('Render: Component rendering...');
  return (
    <div>
      <p>Memoized Value: {memoizedValue}</p>
    </div>
  );
}
function App() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
  return (
    <div>
      <MyComponent a={a} b={b} />
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

Console output order

When the component is rendered for the first time:

Render: Component rendering...
useMemo: Calculating expensive value...
useEffect: Side effect after DOM update

When a or b changes:

Render: Component rendering...
useMemo: Calculating expensive value...
useEffect: Cleanup
useEffect: Side effect after DOM update

Summarize

• useMemo is executed during the rendering phase: Whether it is written above or below the useEffect, it will be executed when the component is rendered.
• useEffect is executed during the commit phase: it is always executed after the DOM is updated, regardless of the order in which the code is written.
• The execution order of React is fixed: useMemo is executed first, useEffect is executed later.

If you need to avoid expensive calculations during the rendering phase, use useMemo; if you need to perform certain operations after the DOM is updated (such as data fetching or subscription), use useEffect.

This is the article about the execution order of useMemo and useEffect in React. For more related React useMemo and useEffect, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!