Does React diff algorithm fails when using inline style

Question

While using react inline-style most people what they do is use object in styles attribute. for eg. <div style={{left: '54px', position: 'absolute'}}> </div>

Does this react diff algorithm fails over here as their is new object created everytime it re-renders.

Coriolanus

Answer 1

YES, It will affect the diff algorithm

Like you said you are creating an Object every time when you re-render.

But, when you do the following

const style = {left: '54px', position: 'absolute'}

<div style={style}></div>

you're passing a reference of style which remains the same throughout the component's lifecycle.

This is same for arrow functions. Read more about this here

Surrounding

but https://facebook.github.io/react/docs/reconciliation.html in DOM Elements Of The Same Type they told it only changes color attribute – Coriolanus

I'm sure about it. But, I'm sure it consider it as a new object everytime. – Surrounding

if possible can you provide a working example so i can test it and approve the answer. – Coriolanus