andywer / andywer/react-usestyles

Allow eager styles preparation

オープン
#1 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement help wanted
主要言語
JavaScript
スター
86
フォーク
2
PR マージ指標
30日以内にマージされた PR はありません

説明

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!

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。