title: How can I prevent my functional component from re-rendering with React memo or React hooks?
body: <p>When <code>hiddenLogo</code> changes value, the component is re-rendered. I want this component to <strong>never</strong> re-render, even if its props change. With a class component I could do this by implementing sCU like so:</p>
  
  <pre><code>shouldComponentUpdate() {
    return false;
  }
  </code></pre>
  
  <p>But is there a way to do with with React hooks/React memo?</p>
  
  <p>Here's what my component looks like:</p>
  
  <pre><code>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 }) =&gt; {
    useEffect(() =&gt; {
      if (hiddenLogo) {
        console.log('Logo has been hidden');
      }
      else {
        showLogo();
  
        setTimeout(() =&gt; {
          hideLogo();
        }, 5000);
      }
    }, [hiddenLogo]);
  
    return (
      &lt;Wrapper&gt;
        &lt;TitleBar /&gt;
        &lt;InnerWrapper&gt;
          &lt;ConnectedSpringLogo size="100" /&gt;
        &lt;/InnerWrapper&gt;
      &lt;/Wrapper&gt;
    );
  };
  
  Splash.propTypes = propTypes;
  
  export default Splash;
  </code></pre>