JIYIK CN >

When we use the useState hook in our code but forget to import it, it generates the error “Uncaught ReferenceError: useState is not defined”. To fix this error, you need to import the hook before using it import {useState} from 'react'.

// 👇️ Import Hook useState
import {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = event => {
    setCount(current => current + 1);
  };
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default App;

When we use the hook in our code useStatewithout importing it first, the "'useState' is not defined no-undef" error occurs.

The useState hook can be imported from the react package as a named import.

import {useState} from 'react';

This hook returns an array where the first element is the state variable and the second element is setStatea function that can be used to update the state.

The useState hook can be passed an initial state value as a parameter.

const [count, setCount] = useState(0);

The above example sets the initial value of the count state variable to 0.

We can use setCountthe function to update the state.

const [count, setCount] = useState(0);

setCount(100);

When calculating the next state using the previous state, we can pass a function to setState.

const [count, setCount] = useState(0);

setCount(current => current + 1);

We setStatepass a function to , because that function is guaranteed to be called with the current (latest) state.

Otherwise, we could run into some weird race conditions if the state variables we have access to don't represent the latest values.

Please note that there are some rules when using React Hooks.

• Hooks are only called from React function components or custom hooks.
• Only call hooks at the top level
• Do not call hooks in loops, conditionals, or nested functions
• Always use hooks at the top level of a React function, before any early returns