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: 
Have you tried doing it with [shouldComponentUpdate](http://buildwithreact.com/article/optimizing-with-shouldcomponentupdate)? This is exactly what this function should be used for. Just add it to your `component2` and add proper condition inside.
If there is a state change in `condition` the component will re-render itself which means that `component2` will be changed too.