使用 useMemo 代替 React.memo 语法问题

Question

I need to make a demonstration of using React Hooks useMemo. I have working code that is as follows that does what I want:

const SpeakerCardDetail = React.memo(
  ({id,...

I found a link that shows that I could use syntax more like this but I can't figure it out exactly.

This is as far as I got:

const SpeakerDetail = React.useMemo(() => {
   ({ id,

Clearly not it though. I do get that React.memo solves the problem but I do need to show useMemo in action and am hoping there is an alternative syntax that I can use.

Answer 1

React.memo and React.useMemo are not equivalent at all (don't rely on naming similarity). Here's a quote from React.memo doc :

React.memo is a higher order component .

So it's a HOC that can optimize rendition of your component given that it renders the same output with the same properties.

React.useMemo on the other hand is more generic and returns a memoized value :

Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies (either a or b ) has changed.

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b), 
  [a, b]
);

And while it can be hacked to be used instead of React.memo , it's not its purpose and it will add to the confusion more than it will help. useMemo is a hook and is subject to the certain usage rules .

And there's this warning as well:

In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, eg to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

Answer 2

While memo is a HOC and useMemo is a hook, you can use them the achieve the same result.

For context, HOC is an older React pattern that has been used for many years with class-based and functional components alike. You can still use it today (there's no plan for deprecation).

Hooks is a relatively new concept (about a year) that enhances functional components and in many cases drastically simplifies code . That's why many developers are moving towards using hooks.

Anyway, both memo and useMemo take two arguments: a function and props. If none of the props change on subsequent re-renders, the function is not executed again and instead returns the previous result. This, in effect, replaces shouldComponentUpdate callbacks, with a purely functional approach.

With memo , your code would look like this:

const SpeakerCardDetail = React.memo(
  (props) => <div>{props.name}</div>
)

With useMemo , you'd write:

const SpeakerCardDetail = (props) => useMemo(() => <div>{props.name}</div>)

Notice that useMemo is used inside of your component function, while memo wraps the function.

More traditionally, useMemo could be written as:

function SpeakerCardDetail(props) {
  return useMemo(
    () => <div>{props.name}</div>
  )
}

Now, the code above would re-render every time, making the useMemo function a bit useless. To make it work its magic, we need to add the second argument. ( memo still works even without specifying the second argument but you can add it to customize it)

There's a slight difference in the format of the second argument. memo expects a function that compares previous and current props, just like shouldComponentUpdate does for class components.

const SpeakerCardDetail = React.memo(
  (props) => <div>{props.name}</div>
,
  // return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false
  (prevProps, nextProps) => prevProps.name === nextProps.name
)

useMemo , on the other hand, expects an array as the second argument. Whenever the values in the array change, the function would be executed again.

function SpeakerCardDetail(props) {
  return useMemo(
    () => <div>{props.name}</div>
  ,
    [props.name]
  )
}

There's really no more magic than that. Both memo and useMemo are used to memoize the result of a function, the only difference is memo is a HOC (and can be used to wrap both class and functional components) which useMemo is a hook (and can only be used inside functional components).

Answer 3

To summarise React.memo vs useMemo / TLDR:

React.memo is a higher-order component (HOC for short) that will memoize a react component based on the props.

export function SomeComponent({ num }) {
  return <p>{num * 10}</p>
}

export default React.memo(SomeComponent, function areEqual(
  prevProps,
  nextProps
) {
  if (prevProps.num !== nextProps.num) {
    return false
  }
  return true
})

useMemo is a react hook that will memoize the value that is returned from the function you provide it.

export function SomeComponent({ num }) {
  const res = useMemo(() => num * 10, [num])
  return <p>{res}</p>
}

Source

Answer 4

React.Memo

Using React.memo will cause React to skip rendering a component if its props have not changed.

Example:

const Child = React.memo(props => {
  console.log("rendered");
  return <React.Fragment>{props.name}</React.Fragment>;
});

class App extends React.Component {
  state = {
    value: 1,
    name: "Jioke"
  };

  handleClick = () => {
    this.setState({
      value: this.state.value + 1
    });
  };

  render() {
    return (
      <React.Fragment>
        <Child name={this.state.name} />
        <div>{this.state.value}</div>
        <button onClick={this.handleClick}>+</button>
      </React.Fragment>
    );
  }
}

When we click button, Child Component does not re-render( rendered is displayed only 1)

Notes: The more props, the more calculations, comparison(check is render or not) added comparison cost is not worth it for a "simple" component in terms of render, reconcile, DOM change and side-effect costs. So be careful to decide use it or not

UseMemo

useMemo will cache a value so that it does not need to be recalculated each times components is re-render. It saves return value of function and returns if the inputs are not changed.

Example:

import { useState, useMemo } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

ReactDOM.render(<App />, document.getElementById('root'));

we have an expensive function that runs on every render. When changing the count or adding a todo, you will notice a delay in execution. So when we use useMemo the expensive function will only run when its dependencies have changed. In the following example, the expensive function will only run when count is changed and not when todo's are added.

Answer 5

Please use this simple example to better understand the answers above.

// index.js

import React , { useState, useMemo } from 'react';
import ReactDOM from 'react-dom/client';

const Child1 = (props) => {
  console.log("Child1");
  return <p>Child 1</p>;
};

const Child2 = React.memo((props) => {
  console.log("Child2");
  return <p>Child 2</p>;
});

const Child3 = (props) => {
  console.log("Child3");
  return <p>Child 3</p>;
};

const expensiveCalculation = (label) => {
  console.log(label);
  return label;
}; 

function App() {
  console.log("App");

  const [count, setCount] = useState(0);
  const child3 = useMemo(() => <Child3 />, []);

  const calculation1 = expensiveCalculation("Expensive calculation without useMemo");
  const calculation2 = useMemo(() => expensiveCalculation("Expensive calculation with useMemo"), []);

  return (
    <>
      <button onClick={() => {setCount(c => c + 1);}}>Increase count</button>
      <p>Current count: {count}</p>

      <Child1 />
      <Child2 />
      {child3}

      <p>{calculation1}</p>
      <p>{calculation2}</p>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Input/output:

// Initial render
App
Expensive calculation without useMemo
Expensive calculation with useMemo
Child1
Child2
Child3
// Click on the "Increase count" button and observe the impact of memo and useMemo.
App
Expensive calculation without useMemo
Child1

Notes:

• I have taken a very simple example to make it easy to explain. Please research a little bit more on the arguments memo and useMemo takes.