Most optimised way to do dom manipulation in React

3372 views javascript
0

What's the most reliable / optimised way in React for animating a dom element with a number sequence going from 0 to N, using a tween library? I assume using setState would not be ideal, even if you use it with shouldComponentUpdate method.

Is references the most reliable option?

answered question

1 Answer

1

Let's say we're using gsap to animate our div, a solution could be something like this:

import React, { PureComponent } from 'react';
import { TweenLite, Power2 } from 'gsap';

class Example extends PureComponent {

    componentDidMount() {
        this.dummy = {
            value: 0
        };

        TweenLite.to(this.dummy, 0.8, {
            value: 100,
            ease: Power2.easeInOut,
            onUpdate: () => {
                this.domElement.innerHTML = dummy.value;
            }
        });
    }

    componentWillUnmount() {
        TweenLite.killTweensOf(this.dummy);
    }
    render() {
        return (
            <div ref = {(dom) => { this.domElement = dom; }} />
        );
    }
}

posted this

Have an answer?

JD

Please login first before posting an answer.

Ads

Categories