https://github.com/d8corp/react-def
Deferring of the components rendering
https://github.com/d8corp/react-def
Last synced: about 1 year ago
JSON representation
Deferring of the components rendering
- Host: GitHub
- URL: https://github.com/d8corp/react-def
- Owner: d8corp
- License: mit
- Created: 2020-03-28T11:51:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:41:22.000Z (over 3 years ago)
- Last Synced: 2025-03-21T09:03:58.035Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 682 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-def
[](https://www.npmjs.com/package/react-def)
[](https://www.npmjs.com/package/react-def)
[](https://github.com/d8corp/react-def/blob/master/LICENSE)
Use the component when DOM changes or component rendering take a lot of time.
## Installation
```bash
npm i react-def
# or
yarn add react-def
```
## Using
The best way of using the component is to do it with elements that show self only on hover.
The rendering of the components starts working only when the whole app will be rendered and displayed.
Then `Def` components will render one by one as quickly as we can have `60fps`.
```typescript jsx
import Def from 'react-def'
const TEN = [...new Array(10)]
const Throttling = ({value = 10, children}) => {
const end = Date.now() + value
while (Date.now() < end) {
continue
}
return children
}
const SimpleComponent = () => (
{TEN.map((v, i) => (
{TEN.map((v, j) => (
({i}.{j})
))}
))}
)
const DefComponent = () => (
{TEN.map((v, i) => (
{TEN.map((v, j) => (
({i}.{j})
))}
))}
)
```
Try to use the `SimpleComponent` and the `DefComponent` and you see the difference.
Also, you can provide property of the `placeholder` to show something wile it's rendering.
```typescript jsx
const DefComponentPredefine = () => (
{TEN.map((v, i) => (
{TEN.map((v, j) => (
({i}.{j})
))}
))}
)
```
If you wanna defer the rendering only once use `once` property.
```typescript jsx
const DefComponentPredefine = () => (
{TEN.map((v, i) => (
{TEN.map((v, j) => (
({i}.{j})
))}
))}
)
```
## Issues
If you find a bug, please file an issue on [GitHub](https://github.com/d8corp/react-def/issues).