Menu
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.
892
One of the main reasons that inline styling is not a good choice for your application is because it does not support (or it has really poor support) for CSS features. Every application nowadays might have to end up using some selectors such as :hover , :active , :focused , etc.
Inline styles cannot be used to target pseudo-classes or pseudo-elements.
React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case ( borderRadius ) instead of kebab-case ( border-radius ).
React uses a heuristic algorithm called the Diffing algorithm for reconciliation based on these assumptions: Elements of different types will produce different trees. We can set which elements are static and do not need to be checked.
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
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With