CODEWITHSUNDEEP
javascriptreactjsreact-fiber
user8626205
user8626205

Reputation:

React fiber animations not working properly

I recently watched a video by Lyn Clarke, stating that ReactJS 16.2.0 or react fiber is providing us a platform where we can have smooth CSS transitions and animations. I tried the same thing by having a transition and creating a list of 999 items and updating all 999 items on click of a button. On click of the button, I am getting a flickering effect on the transition which shouldn't be as per the docs.What wrong am I doing in the code? Below is my component:

import React from "react";

export default class ReactFibre extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            randomArray:[]
        }
        this.changeArray = this.changeArray.bind(this)
    }

componentWillMount(){
    let tempArray = [];
    for(let i=0; i<999; i++){
        tempArray.push(Math.random());
    }
    this.setState((state,props) =>{
        return {
            randomArray: tempArray
        }
    })
}

changeArray(){
    let tempArray = [];
    for(let i=0; i<999; i++){
        tempArray.push(Math.random());
    }
    this.setState((state,props) =>{
        return {
            randomArray: tempArray
        }
    });
}
render() {
    let randomArray = this.state.randomArray;
    return (
        <div className="content">
            <strong>The Power of React Fibre</strong>
            <button onClick={this.changeArray}>Change State</button>
            <div className="block"></div>
            <ul>
                {
                    randomArray.map((item)=>{
                        return <li key={item}>{item}</li>
                    })
                }
            </ul>
        </div>
    );
}
}

CSS:

.block {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 50px;
  background-color: #0CB1C4;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
  from {
     width: 100px;
  }

  to {
    width: 300px;
  }
}

Upvotes: 0

Views: 316

Answers (1)

Darko
Darko

Reputation: 535

You need to use AsyncMode component when rendering the app.

<AsyncMode> <App /> </AsyncMode>

I am planning on testing async rendering myself so I will update the answer with a link to my code when I can.

Upvotes: 1

Related Questions