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.

score 2 · Answer 1 · edited May 23 '17 at 10:30

2

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

edited May 23 '17 at 10:30

Community

1
1

answered Nov 11 '16 at 06:12

Pranesh Ravi

18,642
9
46
70

1

but `https://facebook.github.io/react/docs/reconciliation.html` in DOM Elements Of The Same Type they told it only changes color attribute – Priyank Bhatt Nov 11 '16 at 06:18
I'm sure about it. But, I'm sure it consider it as a new object everytime. – Pranesh Ravi Nov 11 '16 at 06:20
if possible can you provide a working example so i can test it and approve the answer. – Priyank Bhatt Nov 14 '16 at 11:22

Does React diff algorithm fails when using inline style

1 Answers1