https://github.com/hellsan631/stress-hooks
An app to benchmark React Hooks
https://github.com/hellsan631/stress-hooks
Last synced: 4 months ago
JSON representation
An app to benchmark React Hooks
- Host: GitHub
- URL: https://github.com/hellsan631/stress-hooks
- Owner: hellsan631
- License: mit
- Created: 2020-10-29T17:08:52.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-17T16:41:59.000Z (about 5 years ago)
- Last Synced: 2024-12-31T17:35:28.996Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://www.matthiasjenny.com/stress-hooks/
- Size: 2.98 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING
- License: LICENSE
Awesome Lists containing this project
README
# Stress Testing React Hooks
[Stress Testing React Hooks](https://www.matthiasjenny.com/stress-hooks/) is a benchmark tool for [React Hooks](https://reactjs.org/docs/hooks-intro.html).
## Overview
Users can benchmark the following six components with a benchmark function of their choice:
### `ClassComponent`
```jsx
class ClassComponent extends React.Component {
constructor(props) {
super(props);
const { benchmark, args } = this.props;
this.state = { result: benchmark(...args) };
}
render() {
return (
<>
ClassComponent
Result: {this.state.result}
Render #: {this.props.renderNumber}
>
);
}
}
```
### `FunctionalComponent`
```jsx
function FunctionalComponent(props) {
const { benchmark, args } = props;
const result = benchmark(...args);
return (
<>
FunctionalComponent
Result: {result}
Render #: {props.renderNumber}
>
);
}
```
### `HooksComponent`
```jsx
function NaiveHooksComponent(props) {
const { benchmark, args } = props;
const [result] = useState(benchmark(...args));
return (
<>
HooksComponent
Result: {result}
Render #: {props.renderNumber}
>
);
}
```
### `MemoHooksComponent`
```jsx
function MemoHooksComponent(props) {
const { benchmark, args } = props;
const calculatedResult = useMemo(() => benchmark(...args), props.args);
const [result] = useState(calculatedResult);
return (
<>
MemoHooksComponent
Result: {result}
Render #: {props.renderNumber}
>
);
}
```
### `FunctionHooksComponent`
```jsx
function FunctionHooksComponent(props) {
const { benchmark, args } = props;
const [result] = useState(() => benchmark(...args));
return (
<>
FunctionHooksComponent
Result: {result}
Render #: {props.renderNumber}
>
);
}
```
### `RefHooksComponent`
```jsx
function RefHooksComponent(props) {
const { benchmark, args } = props;
const ref = useRef(null);
if (ref.current === null) {
ref.current = benchmark(...args);
}
const [result] = useState(ref.current);
return (
<>
RefHooksComponent
Result: {result}
Render #: {props.renderNumber}
>
);
}
```
## [Contributing](./CONTRIBUTING.md)
## [License](./LICENSE)