Hyphen Wrex Hyphen Wrex - 13 days ago 7
React JSX Question

How to apply transform to react component without rerendering it?

I was applying transform via state to react SVG component, but then it was rerendering very frequently, everything lagged. So now I'm trying to avoid state update and using transform translate and it is again very slow and clunky.

componentDidMount() {
let circleElem = this.refs.circ;
let offset = 0;
setInterval(() => {
offset++;
circleElem.style.transform = "translate("+offset+"px, 0)";
}, 100);
}



render() {
return (
<circle
{...this.props.attributes}
ref='circ'
/>
);
}


Is this the way react handles SVG and is very slow? Or is there a better way to do this operation which I'm missing?

Answer

If you are controlling the component completely and you are sure that there are no need of re-rendering them you may use shouldComponentUpdate API https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate If you return always false the component will not rerender and will leave that to you. Of course you may place some conditional logic inside and decide when to render.

Comments