# hooks-perf-issues

**Repository Path**: mirrors_gaearon/hooks-perf-issues

## Basic Information

- **Project Name**: hooks-perf-issues
- **Description**: This repo demonstrates a situation where it is slower to use React hooks than classes
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Hooks performance test

Here is an example of how hooks can cause performance problems. This does not mean that hooks should be avoided, just that performance with hooks needs to managed carefully.

This demo was modelled off a real world performance issue I was tasked to solve where we had special URL qualification logic that took a long time as our app was writing out special hrefs to link tags.

## Run as hook

```
yarn start-hooks
```

<img src="example.png" />

Click on a blue square. Eventually the yellow square next to it should turn white.

Notice clicks take roughly 940-1090ms to propagate

<img src="hooks.png" />

## Run as class

```
yarn start-class
```

Click on a blue square. Again eventually the yellow square next to it should turn white.

Notice clicks take roughly 220-320ms to propagate

<img src="class.png" />

## What's the difference?

Basically hooks are slower because they break the `React.memo()` cache on downstream components by recreating callbacks when the state changes.

Our hooks App implementation works like so:

```js
function App() {
  const [isYellow, setIsYellow] = useState(true);

  const handleClick = useCallback(() => {
    setIsYellow(!isYellow);
  }, [isYellow]);

  return (
    <>
      <h1>App.hooks.js</h1>
      <Box isYellow={isYellow} depth={12} onClick={handleClick} />
    </>
  );
}
```

Our class implementation works like so:

```js
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isYellow: true
    };
  }

  handleClick = () => {
    this.setState(({ isYellow }) => ({
      isYellow: !isYellow
    }));
  };

  render() {
    const isYellow = this.state.isYellow;
    const handleClick = this.handleClick;
    return (
      <>
        <h1>App.class.js</h1>
        <Box isYellow={isYellow} depth={12} onClick={handleClick} />
      </>
    );
  }
}
```

The other components in the tree remain the same.

Our memoized component is the Button component:

```js
export default memo(({ onClick }) => {
  // do some expensive work calculating the button guarded by the memo
  let work = 0.5;
  for (let i = 0; i < 10000; i++) {
    work = (work + Math.random()) / 2;
  }
  return <div style={style} onClick={onClick} />;
});
```