andywer / andywer/react-usestyles

Allow eager styles preparation

Open
#1 2 comments 0 reactions 0 assignees View on GitHub
enhancement help wanted
Dominant language
JavaScript
Stars
86
Forks
2
PR merge metrics
No merged PRs in 30d

Description

There are [some opt-in options available](https://github.com/andywer/react-usestyles/blob/master/packages/style-hook/README.md#dynamic-styles--themes) 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.

```jsx
import { useStyles } from "@andywer/style-hook"
import React from "react"

function Button () {
const classNames = useStyles({
default: {
background: theme => props.background || theme.button.background.default
// ...
}
}, Button, [props.background])
return // ...
}
```

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!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.