Uncaught TypeError: Object (...) is not a function

Question

I'm very new to Preact and when I want to use hooks in Preact, I get an error:

Uncaught TypeError: Object(...) is not a function

And I don't know what to do and there is a little articles in web for Preact

This is my code

import './style';
import { useState } from 'preact';

function App() {
  const [value, setValue] = useState(0);
  const increment = useCallback(() => setValue(value + 1), [value]);

  return (
    <div>
      Counter: {value}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App

Answer 1

You're importing it wrong. Should be:

import { useState } from 'preact/hooks';

See docs here: https://preactjs.com/guide/v10/hooks/#usestate

Answer 2

import './style';
import { useState } from 'preact';

const App = props => {
  const [value, setValue] = useState(0);
  const increment = useCallback(() => setValue(value + 1), [value]);

  return (
    <div>
      Counter: {value}
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default App;