52

I've been reading these links:
https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate
https://reactjs.org/blog/2018/10/23/react-v-16-6.html

In the first link it says (https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks):

shouldComponentUpdate: See React.memo

The second link also states that:

Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.


What is desired:

I want Modal to render only when the Modal is visible (managed by this.props.show)

For class component:

shouldComponentUpdate(nextProps, nextState) {
    return nextProps.show !== this.props.show;
}

How can I use memo instead in a functional component - here, in Modal.jsx?


The related code:

Functional component Modal.jsx (I don't know how to check for props.show)



import React, { useEffect } from 'react';
import styles from './Modal.module.css';
import BackDrop from '../BackDrop/BackDrop';

const Modal = React.memo(props => {
  useEffect(() => console.log('it did update'));

  return (
    <React.Fragment>
      <BackDrop show={props.show} clicked={props.modalClosed} />
      <div
        className={styles.Modal}
        style={{
          transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
          opacity: props.show ? '1' : '0'
        }}>
        {props.children}
      </div>
    </React.Fragment>
  );
});

export default Modal;

The part of class component PizzaMaker jsx that renders Modal:



 return (
      <React.Fragment>
        <Modal show={this.state.purchasing} modalClosed={this.purchaseCancel}>
          <OrderSummary
            ingredients={this.state.ingredients}
            purchaseCancelled={this.purchaseCancel}
            purchaseContinued={this.purchaseContinue}
            price={this.state.totalPrice}
          />
        </Modal>
        ...
      </React.Fragment>
    );

2
  • 2
    with React.memo, the component will only rerenders if props change, so this is basically what you want May 24, 2019 at 17:47
  • I only want it to rerender when props.show is true, not props itself. Because as long as it's invisible, to increase its performance. It gets visible by clicking 'order now' button which triggers props.show to be true and bring up the order summary, that resides within Modal, to be visible. May 24, 2019 at 18:00

2 Answers 2

100

Here is the documentation for React.memo

You can pass a function to control the comparison :

const Modal = React.memo(
  props => {...},
  (prevProps, nextProps) => prevProps.show === nextProps.show
);

when the function returns true, the component will not be re-rendered

7
  • 4
    Worked like a charm. Thanks for the KISS approach. And it's exactly what I wanted to know about memo. May 24, 2019 at 19:26
  • what is different between react.memo and useMemo() in react hooks ?
    – aznelite89
    Sep 27, 2021 at 8:00
  • 2
    React.memo is used to prevent rendering of a functional component, useMemo is a hook to prevent recomputing a value inside a functional component Sep 27, 2021 at 8:21
  • Is this the right answer? Because apparently React.memo cannot be counted on like shouldComponentUpdate. From the docs: "This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs."
    – JBaczuk
    Sep 27, 2021 at 19:35
  • @JBaczuk as you said it seems to be used for performance boost only, so the component might be re-rendered even if the function returns true, strange behavior :( Sep 27, 2021 at 20:37
13

Also you can use in export statement like:

export default memo(Modal, (prevProps, nextProps) => prevProps.show === nextProps.show) ;
2
  • 1
    it's not prevState and nextState, It's a prop (prevProps, nextProps). Jul 13, 2021 at 8:05
  • Elegant, exactly wanted this! Mar 16, 2022 at 4:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.