You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Every styles object has to be prepared initially and that happens each component mount. This preparation primarily means separation between static and dynamic style rules/declarations (function values).
Especially for components that get instantiated a lot that might have a serious performance impact.
Possible solution
Could pass a reference to the component to useStyles(), so the styles can be prepared only once for each component instead of once for each component instance.
If we have the component reference, we have access to the component's name. Could use that for a better development / debugging experience (i.e. put component name on style tags).
Can also stop JSON.stringify()-ing the styles for deduplication when having a component reference. Will improve the overall performance even more!
The text was updated successfully, but these errors were encountered:
There are some opt-in options available to improve the performance, but there is one thing they cannot improve:
Every styles object has to be prepared initially and that happens each component mount. This preparation primarily means separation between static and dynamic style rules/declarations (function values).
Especially for components that get instantiated a lot that might have a serious performance impact.
Possible solution
Could pass a reference to the component to
useStyles()
, so the styles can be prepared only once for each component instead of once for each component instance.Additional benefit:
If we have the component reference, we have access to the component's name. Could use that for a better development / debugging experience (i.e. put component name on style tags).
Can also stop
JSON.stringify()
-ing the styles for deduplication when having a component reference. Will improve the overall performance even more!The text was updated successfully, but these errors were encountered: