andywer / andywer/react-usestyles

Allow eager styles preparation

Ouverte
#1 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
enhancement help wanted
Langage dominant
JavaScript
Étoiles
86
Forks
2
Métriques de merge des PR
Aucune PR mergée en 30 j

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!

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.