react-def

Use the component when DOM changes or component rendering take a lot of time.

Installation

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 = () => (

const DefComponent = () => (

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 = () => (
  <div>
    {TEN.map((v, i) => (
      <div key={i}>
        <Def placeholder='loading...'>
          {TEN.map((v, j) => (
            <Throttling key={j}>
              ({i}.{j})
            </Throttling>
          ))}
        </Def>
      </div>
    ))}
  </div>
)

If you wanna defer the rendering only once use once property. typescript jsx const DefComponentPredefine = () => ( <div> {TEN.map((v, i) => ( <div key={i}> <Def once> {TEN.map((v, j) => ( <Throttling key={j}> ({i}.{j}) </Throttling> ))} </Def> </div> ))} </div> )

Issues

If you find a bug, please file an issue on GitHub.