Need help increasing fps with large board grids

Code Feedback
1

Essentially I am done with this project using react/redux, though I’d like to improve the animation fps.

I noticed that as I increase the number of grids on my board, the fps significantly slows down.

I’m using requestAnimationFrame inside my componentDidMount in one of my containers to launch the animation.

I’m suspecting that there is a memory leak somewhere.

In addition, I am having hard time stopping the requestAnimationFrame function.

Here’s a bit of code that I’ve written in my container:

class Controller extends Component {
  constructor(props){
    super(props);
    this.startBtnText = this.startBtnText.bind(this);
    this.initializeAnimation = this.initializeAnimation.bind(this)
  }

  initializeAnimation(){
    // console.log('animate')
    this.props.start(this.props.coord)
    requestAnimationFrame(this.initializeAnimation)
  }
  componentDidMount() {
    // this.setState({
    //   request: requestAnimationFrame(this.initializeAnimation)
    // })
  }

  componentWillUnmount(){
    cancelAnimationFrame(this.state.request);
  }

  startBtnText(){
    //toggle the app state's on starting/pausing the board
    this.props.toggle()
    cancelAnimationFrame(this.initializeAnimation)
  }
....

I noticed that even if I call cancelAnimationFrame, the requestAnimationFrame still runs.

Any tips or response will be greatly appreciated

Thanks