Converting shouldcomponentupdate to memo in React

Question

What will be the equivalent code using React memo?

 shouldComponentUpdate(nextProps) {

    if (this.props.addCourse !== nextProps.addCourse || this.props.level !== nextProps.level ) {
      return true;
    } else {
      return false;
    }
  }

Answer 1

The memo Higher Order Component consumes an additional areEqual function that should return the inverse of shouldComponentUpdate .

memo

Note

Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are not equal. This is the inverse from shouldComponentUpdate .

const areEqual = (prevProps, nextProps) => {
  if (
    prevProps.addCourse !== nextProps.addCourse ||
    prevProps.level !== nextProps.level
  ) {
    return false;
  }
  return true;
};

memo(MyComponent, areEqual);