Choppy height CSSTransition in react with multiple items - css

Question

Goal: I'm getting really frustrated and have been scavenging through posts for hours now and can't find any real solution. I'm trying to animation a table row's height to expand/collapse when clicked on. I figured there should be an easy enough solution... Boy was I wrong.
Ideally since each row is going to store quite a bit of extra data, I'd like to load in the data, expand that single row, then remove the data when it's collapsed.
Problem:
I managed to get the animation working great!! I was so excited, only to find out that when I have more than ~3 rows, it gets extremely choppy/laggy. I can't find any fix what so ever.
Here is a sandbox https://codesandbox.io/s/0ql5vp13qv or if you wanted to see the code that manages the animation my code now:
import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group';
import Icon2 from '../Icon';
import * as Styled from './styles'
export default class CourseRow extends Component {
state = {switched: false};
selectCourse = () => {
this.setState(({switched}) => ({switched: !switched}));
}
render() {
return (
<Styled.Row onClick={this.selectCourse}>
<Styled.InnerRow>
<Styled.Field light>CSCI 1000</Styled.Field>
<Styled.Field>Computer Science 1</Styled.Field>
<Styled.Field>Explore algorithms and data structures that...</Styled.Field>
<Styled.Field><Styled.DropdownButton ><Icon2 icon="up_arrow"/></Styled.DropdownButton></Styled.Field>
</Styled.InnerRow>
<CSSTransition
classNames="fade"
timeout={300}
key={this.props.Title}
in={this.state.switched}
unmountOnExit
>
<div>
test<br/>test<br/>test<br/>
</div>
</CSSTransition>
</Styled.Row>
);
}
}
import styled from 'styled-components';
import Button from 'components/Button';
const columns = "1.5fr 2.5fr 5fr 3fr";
export const DropdownButton = styled(Button)`
background-color: blue;
`;
export const InnerRow = styled.div`
display: grid;
grid-template-columns: ${columns};
grid-column-gap: 1rem;
grid-row-gap: 0;
padding-top: ${props => props.heading ? '2.25rem' : '1.5rem'};
padding-bottom: ${props => props.heading ? '2rem' : '1.5rem'};
padding-left: 0.75rem;
padding-right: 0.75rem;
border-top: ${props => props.heading ? 'none' : '1px solid #E8E8E8'};
cursor: ${props => props.heading ? 'default' : 'pointer'};
`;
export const Row = styled.div`
&:hover {
background-color: #f7faff;
color: #1873EA;
}
& .fade-enter {
overflow-y: hidden;
max-height: 0;
}
& .fade-enter-active {
max-height: 200px;
transition: all 200ms ease;
}
& .fade-exit {
max-height: 200px;
}
& .fade-exit-active {
max-height: 0;
overflow-y: hidden;
transition: all 200ms ease;
}
`;
export const Field = styled.span`
display: flex;
align-items: center;
font-size: 14px;
font-weight: ${props => props.light ? '400' : '300'};
&:last-of-type {
justify-content: flex-end;
}
`;
I thought maybe adding key's to the elements/transitions would help however still nothing...
I took videos of the comparisons so you can see what I'm talking about it.
This is with 1 row:
https://www.youtube.com/watch?v=E6Db7nuqlgk&feature=youtu.be
This is with ~6 rows:
https://www.youtube.com/watch?v=Troba8eIqKA&feature=youtu.be