Automatic unit insertion on properties and properties
Inferno makes no attempt to add the unit to numerical attributes or properties that React attempts to automatically add units to. For example:
<div style={ { left: 10 } }/>will result in px being added automatically to the style property in React. To ensure Inferno is kept lean and fast, the code base does not contain these expensive checks and overheads have been removed. It's completely down to the user to specify the property. So with Inferno, you should use the following to achieve the same result<div style={ { left: '10px' } } />.
We are looking to migrate a large codebase to Inferno. However, this micro optimisation makes it virtually impossible. Not only because of the amount of work it would take to update our components, but also because of third-party components that we cannot update.
What exactly is the code that you have removed? It simply cannot be a bottleneck of any performance issue. I imagine it is something as simple as:
const IsInteger = /^[0-9]+$/;
normaliseStyleUnits = (userStyle) => {
const normalisedStyle = {
...styleDefinition
};
if (IsInteger.test(normalisedStyle.width)) {
normalisedStyle.width = normalisedStyle.width + 'px';
}
if (IsInteger.test(normalisedStyle.height)) {
normalisedStyle.height = normalisedStyle.height + 'px';
}
return normalisedStyle;
};
@gajus Thanks for the feedback. We've actually heard similar feedback from other users suggesting the same so we'll be adding it back into Inferno in the next update. Thanks for using Inferno :)
@Havunen @Kflash if either of you guys get a chance, could you possibly look into this one? I've been asked about it again recently and we should really get it in the next release :)
Release in 0.7.12
Most helpful comment
@gajus Thanks for the feedback. We've actually heard similar feedback from other users suggesting the same so we'll be adding it back into Inferno in the next update. Thanks for using Inferno :)