# react-time-slicer

> Renders React nodes asynchronously.

Latest version **2.0.1** (published 2019-06-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-time-slicer
pnpm add react-time-slicer
yarn add react-time-slicer
bun add react-time-slicer
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-06-30 |
| First published | 2018-07-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Steven Liao |
| Maintainers | 2ezpz2plzme |
| Keywords | react, time slicing, throttle, asynchronous, requestIdleCallback |

## Links

- npm: https://www.npmjs.com/package/react-time-slicer
- Repository: https://github.com/Penspinner/react-time-slicer
- Homepage: https://github.com/Penspinner/react-time-slicer#readme
- Issues: https://github.com/Penspinner/react-time-slicer/issues
- npm.io page: https://npm.io/package/react-time-slicer

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.8.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2019-06-30
- 2.0.0 — 2019-06-29
- 1.0.2 — 2019-06-28
- 1.0.1 — 2018-12-16
- 1.0.0 — 2018-07-24
- 0.0.7 — 2018-07-23
- 0.0.6 — 2018-07-23
- 0.0.5 — 2018-07-23
- 0.0.4 — 2018-07-21
- 0.0.3 — 2018-07-21
- 0.0.2 — 2018-07-21
- 0.0.1 — 2018-07-21

## README

# React Time Slicer

React Time Slicer renders React nodes during idle periods to alleviate lag on high priority updates (like updating an input) that triggers render in a heavy low priority update (like rendering charts).

Idle period renders are only available on the browsers specified in this [link](https://caniuse.com/#feat=requestidlecallback). Other browsers will cause React Time Slicer to render children in a 30 millisecond throttler.

This package was inspired by Dan Abramov's talk about React async rendering and time slicing.

### Prop Types

| Property | Type      | Required? | Default | Description                                          |
| :------- | :-------- | :-------: | :------ | :--------------------------------------------------- |
| children | ReactNode |           | `null`  | The React node that will be rendered (eg `<div />`). |

<br>

```js
import React from 'react';
import ReactDOM from 'react-dom';
import TimeSlicer from 'react-time-slicer';

const HeavyComponent = ({ value }) => {
  let newValue = value;

  for (let i = 0; i < 1000000; i++) {
    newValue = `${value} ${i}`;
  }

  return newValue;
};

const App = () => {
  const [value, setValue] = React.useState('');

  const handleChange = e => {
    setValue(e.target.value);
  };

  return (
    <div>
      <label htmlFor="input">
        Update me
        <input id="input" onChange={handleChange} value={value} />
      </label>

      <br />

      <TimeSlicer>
        {/* A render-heavy element will cause lag in the input element change without the TimeSlicer.
          Using the TimeSlicer will alleviate some of that lag. */}
        <HeavyComponent value={value} />
      </TimeSlicer>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

---
_Source: https://npm.io/package/react-time-slicer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._