React hooks are a relatively recent addition to the React API. In this post, we will tackle a commonly misunderstood hook, `useMemo`, and see how it compares to usage in class components.

# `useMemo`

**`React.useMemo`** allows developers to #key# memoize: Memoization is a way to store previous results of function calls to optimize performance. #key# expensive function calls in the `render` function. Here's an example:

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React, { useMemo, useState } from 'react';

function factorial(n) {
  if (n < 0) {
    return -1;
  }
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const App = () => {
  const [counter, setCounter] = useState(1);
  const [check, setCheck] = useState(false);
  const result = useMemo(() => {
      // do something expensive that depends on counter
      console.log('calculate', counter);
      return factorial(counter);
  }, [counter]);
  console.log('render', { counter, check });
  return (
    <div>
      <div>Factorial of {counter} is: <span>{result}</span></div>
      <div>
        <button onClick={() => setCounter(counter - 1)}>-</button>
        <button onClick={() => setCounter(counter + 1)}>+</button>
      </div>
      <div>
        <input type="checkbox" value={check} onChange={() => setCheck(!check)} />
      </div>
    </div>
  );
};

export default App;


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

The `factorial` method can potentially be very expensive to execute for large numbers, so, in the code above, I used `useMemo` to memoize it. It will now only run whenever the `counter` state changes. 

Here's how it works:

```
useMemo(expensiveFunction, dependencyArray)
```

The first argument is the function to be memoized -- here it's called the **`expensiveFunction`**. This is typically inlined, but it may be extracted as a function outside of your component if you want. The important thing to note is that executing `expensiveFunction` should return the desired value. To put that in code:

```
useMemo(expensiveFunction, dependencyArray) === expensiveFunction()
```

The next argument to look at is the **`dependencyArray`** argument. This is an array that tells React which variable changes to look out for. Whenever any variable in this dependency array changes from the last render, whether it is from props or local state, the `expensiveFunction` will recompute. In ideal situations, `expensiveFunction` will *only* recompute when any variable in this dependency array changes. 

You will notice that the function still recomputes values it had previously computed -- for example, if you changed `counter` from 2 to 3, then changed it back to 2, it would still re-calculate for `2`. This is important to note because React only memoizes one argument at a time. If you had a very expensive function, you may want to create your own memoization function that caches all computation values instead of the last one.



# Comparison to class component

How does `useMemo` compare to usage in a class component? Here is how I would implement it:

import React from 'react';

function factorial(n) {
  if (n < 0) {
    return -1;
  }
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

export default class App extends React.Component {
  state = {
    counter: 1,
    check: false,
  };

  componentDidMount() {
    this.getFactorial();
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.counter !== this.state.counter) {
      this.getFactorial();
    }
  };

  getFactorial = () => {
    const { counter } = this.state;
    console.log('calculate', counter);
    this.setState({ result: factorial(counter) });
  };

  render() {
    const { counter, result, check } = this.state;
    console.log('render', { counter, check });
    return (
      <div>
        <div>Factorial of {counter} is: <span>{result}</span></div>
        <div>
          <button onClick={() => this.setState({ counter: counter - 1 })}>-</button>
          <button onClick={() => this.setState({ counter: counter + 1 })}>+</button>
        </div>
        <div>
          <input type="checkbox" value={check} onChange={() => this.setState({ check: !check })} />
        </div>
      </div>
    );
  }
}


In the code snippet above, you can see that there's a lot of repetition/boilerplate:
1. In the `componentDidMount`
2. In `componentDidUpdate`
3. You need to manually compare `prevProps`/`prevState` with `this.props`/`this.state` 

This can get unwieldy if you have a lot of functions you need to optimize.

# Conclusion

Hopefully, this helps you understand how to use `React.useMemo` and what patterns to look for when shifting your paradigm from class components to hooks.

When should you use useMemo in React?

useMemo optimizes performance by memoizing function results during renders, triggered by dependency array changes.