Bug: useState inside pure JavaScript/TypeScript class violates rules of hooks

React version: 18.x

Steps To Reproduce

1. use the following code in React project
2. see a compilation error

Link to code example:

class ThemeService {
  private _theme: any;
  private _setTheme: any;
  constructor() {
    const [theme, setTheme] = useState("Red");
    this._theme = theme;
    this._setTheme = setTheme;
  }

  get theme(): string {
    return this._theme;
  }

  ToggleTheme() {
    this._setTheme(this._theme === "Red" ? "Blue" : "Red");
  }
}

The current behavior

above usage generates the following compilation error

ERROR in [eslint] src/App.tsx Line 8:31: React Hook “useState” cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function

The expected behavior

I understand that the class Component has diff state management so “useState” is not allowed inside the class-based react component but I am not sure why usage inside the pure class is restricted.

[pashvin]

Thanks for the detail and for the video which explains closers. After looking into “closers video”, I thought my code is working because I am creating a singleton and it will break and mess up with the internal state as soon as I create two instances like the following but surprisingly it works so I don’t know why we want to break which is working and looks like the answer is the design decision to avoid classes for simplicity. I have intermediate-level knowledge of React and can’t argue much against the decision but hope if this is supported, then can open a door for diff pattern.

class CounterLogic {
  constructor() {
    // eslint-disable-next-line
    const [count, setCount] = React.useState(10);
    this._count = count;
    this._setCount = setCount;
  }

  count() {
    return this._count;
  }

  inc() {
    this._setCount(this._count + 1);
  }

  dec() {
    this._setCount(this._count - 1);
  }
}

const Counter = () => {
  const test = new CounterLogic();

  return (
    <div>
      <h2>Counter: {test.count()}</h2>
      <button onClick={()=>test.inc()}>Increment</button>
      <button onClick={()=>test.dec()}>Decrement</button>
    </div>
  );
}

const App = () => {

  return (
    <div>
      <Counter/>
      <Counter/>
    </div>
  );
};

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

[rickhanlonii]

Closing, as @markerikson explained, hooks are not intended to work inside classes and we don’t think making them work there is the right approach.