How can I prevent my functional component from re-rendering with React memo or React hooks?

Question

When hiddenLogo changes value, the component is re-rendered. I want this component to never re-render, even if its props change. With a class component I could do this by implementing sCU like so:

shouldComponentUpdate() {
  return false;
}

But is there a way to do with with React hooks/React memo?

Here's what my component looks like:

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

import ConnectedSpringLogo from '../../containers/ConnectedSpringLogo';

import { Wrapper, InnerWrapper } from './styles';
import TitleBar from '../../components/TitleBar';

const propTypes = {
  showLogo: PropTypes.func.isRequired,
  hideLogo: PropTypes.func.isRequired,
  hiddenLogo: PropTypes.bool.isRequired
};

const Splash = ({ showLogo, hideLogo, hiddenLogo }) => {
  useEffect(() => {
    if (hiddenLogo) {
      console.log('Logo has been hidden');
    }
    else {
      showLogo();

      setTimeout(() => {
        hideLogo();
      }, 5000);
    }
  }, [hiddenLogo]);

  return (
    <Wrapper>
      <TitleBar />
      <InnerWrapper>
        <ConnectedSpringLogo size="100" />
      </InnerWrapper>
    </Wrapper>
  );
};

Splash.propTypes = propTypes;

export default Splash;

Nicholas Tower · Accepted Answer · 2024-04-29 12:25:41Z

84

As Aziz.G said, React.memo functions similarly to pure component. However, you can also adjust its behavior by passing it a function which defines what counts as equal. Basically, this function is shouldComponentUpdate, except you return true if you want it to not render.

const areEqual = (prevProps, nextProps) => true;

const MyComponent = React.memo(props => {
  return /*whatever jsx you like */
}, areEqual);

edited Apr 29, 2024 at 12:25

answered Mar 1, 2019 at 15:34

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

j.doe Over a year ago

Awesome! Thank you!

HalfWebDev Over a year ago

How can we perform a deep comparison of props?

Quoc Van Tang Over a year ago

React.memo only compare newProps and oldProps, how can we compare newState and oldState to decide when to re-render?

Nicholas Tower Over a year ago

@QuocVanTang the useState hook will do its own check to make sure the value changed, and skip the render if it did not. Other than that, you can't prevent a rerender when setting state in a functional component. Depending on what your component does, you can use useMemo or useCallback to skip some calculations in the render.

AlexJ Over a year ago

Regarding React.memo, the docs say, "This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs." (reactjs.org/docs/react-api.html#reactmemo). Does anyone know more about what bugs can occur?

|

Aziz.G · Accepted Answer · 2019-12-17 20:52:45Z

18

React.memo is same thing as React.PureComponent

You can use it when you don't want to update a component that you think is static so, Same thing as PureCompoment.

For class Components:

class MyComponents extends React.PureCompoment {}

For function Components:

const Mycomponents = React.memo(props => {
  return <div> No updates on this component when rendering </div>;
});

So it's just creating a component with React.memo

To verify that your component doesn't render you can just activate HightlightUpdates in react extension and check your components reaction on rendering

edited Dec 17, 2019 at 20:52

answered Mar 1, 2019 at 14:55

Aziz.G

3,7913 gold badges20 silver badges38 bronze badges

2 Comments

j.doe Over a year ago

React.memo will re-render the component when its props change. My question is how can I make my component never re-render even if props change, and without using a class.

CodeSmith Over a year ago

Rewrite the second parameter of memo to () => true;

Masih Jahangiri · Accepted Answer · 2019-10-16 04:18:05Z

11

We can use memo for prevent render in function components for optimization goal only. According React document:

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

answered Oct 16, 2019 at 4:18

Masih Jahangiri

11.1k4 gold badges54 silver badges59 bronze badges

Comments

AKASH GUDADHE · Accepted Answer · 2021-03-02 06:53:28Z

0

According to react documentation:- [https://reactjs.org/docs/react-api.html][1]

React. memo is a higher order component. If your component renders the same result given the same props, you can wrap it in a call to React. memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

For practical understanding I came across these two videos they are very good if you wanna clear concepts also, better to watch so it'll save your time.

Disclaimer:- This is not my YouTube channel.

https://youtu.be/qySZIzZvZOY [ useMemo hook]
https://youtu.be/7TaBhrnPH78 [class based component]

answered Mar 2, 2021 at 6:53

AKASH GUDADHE

3971 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

How can I prevent my functional component from re-rendering with React memo or React hooks?

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related