New to React Animations: Am I doing this right?

Hi,

This is my first ever post on Hashnode, I'm not sure if this is the right spot to put questions like this, but here we go..

I've spent the last 6 hours trying to make this work. While trying react-transition-group, the effect seem to work only the first time this particular component loads, then it's like dead in the water in any subsequent re-renders.

So now I'm trying Animate.CSS, and it is the same darn outcome.

I've tried all combinations possible with the Lifecycle hooks and many other different ways to update State but to no avail. Can be a bit heart-sinking when things don't work like it's suppose to. I'm sure some of ya'll know what that means. Ugh.

This is what I have at the moment, see below:

import React, { Component } from 'react'
/* 
NOTE: animate.css is installed via npm and there is no need to import into every component. 
That said, it does work in other components like a charm, just not on this one for some reason :/ 
*/

import './Slide.css'

class slide extends Component {
 state = {
  effect: "fadeIn"
 }

 shouldComponentUpdate() {
  return true
 }

 componentDidMount() {
  this.setState({effect: "rotateIn"})
 }

 componentWillUpdate(nextProps, nextState) {
  nextState.effect = nextProps.effect
 }

 render() {
  const effect = this.state.effect // just testing this line if it would do anything
  return (
   <li className={ `Slide animated ${effect}` }>
     <span>{ this.props.children }</span>
     <p>{ this.state.effect }</p>
     <h4>{ this.props.slide_title }</h4>
   </li>
  )
 }
}

export default slide