A tools set to downgrade UI when client has performance issue
npm install react-downgrade-uinpm i react-downgrade-ui -S`
Then you will be able to use:
* useDowngradeUI - is a function which returns boolean (if true - client has a performance issue)
* DowngradeUIProvider - is a provider which you need to wrap your application to have access to useDowngradeUIExample of usage
`jsx
import * as React from 'react';
import { DowngradeUIProvider, useDowngradeUI } from 'react-downgrade-ui';const TestComponent = () => {
const shouldDowngrade = useDowngradeUI();
console.log(shouldDowngrade);
return
Hello world
;
}export const App = () => {
return (
);
}
``The idea is to measure how event loop is loaded now. If the queue is overloaded - application works incorrect,
with lags and the client will be dissatisfied using our application.
How to detect that queue is overloaded?
It is easy. If we save current time, then run setTimeout for 1000 ms and compare
difference between current time and time we saved before. The difference in normal case should be around 1000,
but if it is more 1500 (+50%) it seems like queue is overloaded.
And this detecting is exactly what this library do for you.