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.
importDeffrom'react-def'
constTEN=[...newArray(10)]
constThrottling=({value=10,children})=>{
constend=Date.now()+value
while(Date.now()<end){
continue
}
returnchildren
}
constSimpleComponent=()=>(
<div>
{TEN.map((v,i) =>(
<divkey={i}>
{TEN.map((v,j) =>(
<Throttlingkey={j}>
({i}.{j})
</Throttling>
))}
</div>
))}
</div>
)
constDefComponent=()=>(
<div>
{TEN.map((v,i) =>(
<divkey={i}>
<Def>
{TEN.map((v,j) =>(
<Throttlingkey={j}>
({i}.{j})
</Throttling>
))}
</Def>
</div>
))}
</div>
)
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.
constDefComponentPredefine=()=>(
<div>
{TEN.map((v,i) =>(
<divkey={i}>
<Defplaceholder='loading...'>
{TEN.map((v,j) =>(
<Throttlingkey={j}>
({i}.{j})
</Throttling>
))}
</Def>
</div>
))}
</div>
)
If you wanna defer the rendering only once use once property.
constDefComponentPredefine=()=>(
<div>
{TEN.map((v,i) =>(
<divkey={i}>
<Defonce>
{TEN.map((v,j) =>(
<Throttlingkey={j}>
({i}.{j})
</Throttling>
))}
</Def>
</div>
))}
</div>
)
Issues
If you find a bug, please file an issue on GitHub.