How to avoid re-renders in React when using conditional Render and children node prop

Question

I have a component that I reuse most of its logic. I'm looking to avoid re-renders on its children components which happen every time I hover over the parent:

const ReusableComponent = ({ conditional }) => {
  const [isHovered, setIsHovered] = useState(false);

  const AnotherReusableComponent = ({ children }) => (
    <div>{children}</div>
  );

  const renderComponent = () => {
    if (conditional) {
      return <ComponentA />;
    };

    return <ComponentB />;
  };

  return (
    <div>
      <title 
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        Menu
      </title>
      <div className={isHovered ? 'oneClass' : 'otherClass'}>
        <AnotherReusableComponent>
          {renderComponent()}
        </AnotherReusableComponent>
      </div>
    </div>
  );
}

Notes:

ComponentA and ComponentB are shown/hidden depending on className
onHover event toggles className
Tried memo, didn't work.
The re-render happens onHover

Memoization is important and will help you. Check [this video](https://www.youtube.com/watch?v=o-alRbk_zP0) by Ben Awad. — mstephen19, Jun 14 '22 at 22:53

score 0 · Answer 1 · answered Jun 15 '22 at 00:28

First, Components should never be declared inside other components, since they will be recreated at each render unless you memoize them with useMemo.
Even if you declare it outside you will experience a re-render of <AnotherReusableComponent> and its children when isHovered changes, hence you need to wrap it into React.memo() to ensure it won't re-render unless its props change:

 const AnotherReusableComponent = React.memo(({ children }) => (
    <div>{children}</div>
  ));

const ComponentA = React.memo(() => (
    <div>A</div>
  ));

const ComponentB = React.memo(() => (
    <div>B</div>
  ));

const ReusableComponent = ({ condition }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div>
      <title 
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        Menu
      </title>
      <div className={isHovered ? 'oneClass' : 'otherClass'}>
        <AnotherReusableComponent>
          {condition ? <ComponentA/> : <ComponentB/>}
        </AnotherReusableComponent>
      </div>
    </div>
  );
}

This should avoid the re-render of AnotherReusableComponent and its children unless condition changes.

How to avoid re-renders in React when using conditional Render and children node prop

1 Answers1