Prevent React from re-rendering a specific child component

Question

I have a react component that conditionally renders several child components. Simplified code is just:

render(): {
  const component1 = condition ? renderComponent2() : null;
  const component2 = renderComponent2();

  return (
    <div>
      {component1}
      {component2}
    </div>
  );
}

The problem is that component2 is getting destroyed and re-rendered whenever the condition changes. I'm trying to prevent that and keep the original element around. I tried adding a key to component2 with no luck.

[edit] This is happening even when component1 always exists and I change flag on it to hide it or not with CSS :/

Answer 1

Have you tried doing it with shouldComponentUpdate? This is exactly what this function should be used for. Just add it to your component2 and add proper condition inside.