Often, a React component will need to be animated when its suppose to come into view. Think about a modal or popup or mobile filter or search that appears when a Button is clicked.

Say we want to fade the filter/modal/screen into view. We have two options

Render the component but hide it with opacity until opened:

<MyComponent style={{opacity: isOpen ? '1' : '0'}}/>

• Pros: we can fade in and fade out, because the component is always there. just change opacity and add css transition.

• Cons: the react component is rendered. This can't be good for performance right? right?

Render the component only when opened but use css animations

{isOpen && <MyComponent />}

css for above component

  animation-duration: 300ms;
  animation-name: fadeIn;

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

• Pros: this has to be better for performance, right? right?
• Cons: fading out is hard. It requires delay from removing it from the DOM. since you can't transition a fade when removing component from the DOM.