How to Fix React useState hook is not a function Error

The ‘useState is not a function’ error is a common issue developers encounter when working with React hooks. This error occurs when the useState hook is not properly imported or when React is not correctly set up in your project.

This comprehensive guide provides complete solutions to resolve the useState is not a function error with practical examples and setup instructions.

---

Understanding the useState Not a Function Error

The useState hook is part of React’s hooks API, introduced in React 16.8. This error typically occurs when:

• React is not properly imported
• useState is not imported from React
• React version is below 16.8
• Incorrect module bundling or configuration
• Using hooks outside of functional components

Common Error Messages:

• TypeError: React.useState is not a function
• TypeError: useState is not a function
• ReferenceError: useState is not defined
• React hooks can only be called inside the body of a function component

---

Common Causes and Solutions

1. Missing React Import

The most common cause is not importing React or useState properly.

❌ Problem Scenario:

// This will cause the error
function MyComponent() {
  const [count, setCount] = useState(0); // ❌ useState is not imported

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

✅ Solution: Proper Import

// Correct approach - import useState from React
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0); // ✅ useState is properly imported

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

2. React Version Issues

Using hooks with React versions below 16.8.

❌ Problem Scenario:

// If React version is below 16.8, hooks won't be available
// Check your package.json
{
  "dependencies": {
    "react": "^16.7.0" // ❌ Too old for hooks
  }
}

✅ Solution: Update React Version

// Update to React 16.8 or higher
{
  "dependencies": {
    "react": "^18.0.0", // ✅ Hooks available
    "react-dom": "^18.0.0"
  }
}

---

Solution 1: Proper React Setup and Imports

Ensure React and hooks are properly imported and configured.

// ✅ Correct import patterns for useState
import React, { useState } from 'react';

// Alternative import patterns
import { useState } from 'react'; // If you don't need other React features

// Or using destructuring
import React from 'react';
const { useState } = React;

// ✅ Component using useState correctly
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;

---

Solution 2: Different Import Patterns

Various ways to import and use useState properly.

// Pattern 1: Named import
import React, { useState } from 'react';

function Component1() {
  const [value, setValue] = useState('');
  return (
    <input 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
      placeholder="Enter text"
    />
  );
}

// Pattern 2: Default import with destructuring
import React from 'react';
const { useState } = React;

function Component2() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? 'Hide' : 'Show'}
      </button>
      {show && <p>Content is visible</p>}
    </div>
  );
}

// Pattern 3: Using React.useState (if you prefer this style)
import React from 'react';

function Component3() {
  const [data, setData] = React.useState(null);
  return <div>{data}</div>;
}

// Pattern 4: Multiple hooks import
import React, { useState, useEffect } from 'react';

function Component4() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  useEffect(() => {
    document.title = `Count: ${count}, Name: ${name}`;
  }, [count, name]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Enter name"
      />
    </div>
  );
}

---

Solution 3: Module Bundler Configuration

Configure your module bundler properly for React hooks.

Webpack Configuration:

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              ['@babel/preset-react', { runtime: 'automatic' }] // React 17+ JSX transform
            ]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Babel Configuration:

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        node: 'current'
      }
    }],
    ['@babel/preset-react', {
      runtime: 'automatic' // Enables new JSX transform
    }]
  ]
};

Package.json Scripts:

{
  "name": "my-react-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  },
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

---

Solution 4: Create React App Setup

If using Create React App, ensure proper setup.

// src/App.js
import React, { useState } from 'react';
import './App.css';

function App() {
  const [message, setMessage] = useState('Hello World');
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className="App">
      {isVisible && <h1>{message}</h1>}
      <button onClick={() => setMessage('Updated Message')}>
        Update Message
      </button>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Visibility
      </button>
    </div>
  );
}

export default App;

CRA Dependencies:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

---

Solution 5: TypeScript Configuration

For TypeScript projects, ensure proper typing.

// TypeScript component with useState
import React, { useState } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserComponent() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  const fetchUser = async (id: number) => {
    setLoading(true);
    setError(null);
    
    try {
      // Simulate API call
      const response = await fetch(`/api/users/${id}`);
      const userData: User = await response.json();
      setUser(userData);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {user && (
        <div>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      )}
      <button onClick={() => fetchUser(1)}>Load User</button>
    </div>
  );
}

export default UserComponent;

TypeScript Configuration:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "es6"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

---

Solution 6: Next.js Configuration

For Next.js projects, ensure proper setup.

// pages/index.js
import React, { useState } from 'react';

export default function Home() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems(prev => [...prev, { id: Date.now(), name: `Item ${prev.length + 1}` }]);
  };

  return (
    <div>
      <h1>Next.js with useState</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <button onClick={addItem}>Add Item</button>
      
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Next.js Configuration:

// next.config.js
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
};

// package.json for Next.js
{
  "name": "my-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

---

Solution 7: Custom Hooks with useState

Create custom hooks that properly use useState.

// hooks/useCounter.js
import { useState } from 'react';

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

// hooks/useInput.js
import { useState } from 'react';

export function useInput(initialValue = '') {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  const reset = () => setValue(initialValue);

  return { value, onChange, reset };
}

// Component using custom hooks
import React from 'react';
import { useCounter, useInput } from '../hooks';

function CustomHookComponent() {
  const { count, increment, decrement, reset } = useCounter(0);
  const { value, onChange, reset: resetInput } = useInput('');

  return (
    <div>
      <div>
        <p>Count: {count}</p>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
      </div>
      
      <div>
        <input value={value} onChange={onChange} placeholder="Enter text" />
        <p>Input: {value}</p>
        <button onClick={resetInput}>Reset Input</button>
      </div>
    </div>
  );
}

export default CustomHookComponent;

---

Solution 8: Testing Environment Setup

Configure your testing environment properly for useState.

Jest Configuration:

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

// src/setupTests.js
import '@testing-library/jest-dom';

// Example test
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('should increment count when button is clicked', () => {
  render(<Counter />);
  
  const countElement = screen.getByText(/count: 0/i);
  expect(countElement).toBeInTheDocument();
  
  const button = screen.getByRole('button', { name: /increment/i });
  fireEvent.click(button);
  
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

Counter Component for Testing:

// src/Counter.js
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

---

Solution 9: Error Handling with useState

Implement proper error handling with useState.

// Error handling with useState
import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    
    try {
      const response = await fetch('/api/data');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={fetchData}>Refresh</button>
    </div>
  );
}

export default DataFetchingComponent;

---

Solution 10: Advanced useState Patterns

Use advanced patterns with useState for complex state management.

// Advanced useState patterns
import React, { useState, useCallback } from 'react';

// Object state management
function UserProfile() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    age: 0
  });

  const updateUser = useCallback((field, value) => {
    setUser(prev => ({
      ...prev,
      [field]: value
    }));
  }, []);

  return (
    <div>
      <input 
        value={user.name}
        onChange={(e) => updateUser('name', e.target.value)}
        placeholder="Name"
      />
      <input 
        value={user.email}
        onChange={(e) => updateUser('email', e.target.value)}
        placeholder="Email"
      />
      <input 
        type="number"
        value={user.age}
        onChange={(e) => updateUser('age', parseInt(e.target.value))}
        placeholder="Age"
      />
      <div>
        <p>Name: {user.name}</p>
        <p>Email: {user.email}</p>
        <p>Age: {user.age}</p>
      </div>
    </div>
  );
}

// Array state management
function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = useCallback(() => {
    if (input.trim()) {
      setTodos(prev => [
        ...prev,
        { id: Date.now(), text: input, completed: false }
      ]);
      setInput('');
    }
  }, [input]);

  const toggleTodo = useCallback((id) => {
    setTodos(prev => 
      prev.map(todo => 
        todo.id === id 
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  }, []);

  const deleteTodo = useCallback((id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }, []);

  return (
    <div>
      <div>
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add a todo..."
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span 
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTodo(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

---

Performance Considerations

Efficient useState Usage:

// Optimized useState patterns
import React, { useState, useCallback, useMemo } from 'react';

function OptimizedComponent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([]);

  // ✅ Use functional updates for state that depends on previous state
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // No dependencies needed

  // ✅ Memoize expensive calculations
  const expensiveValue = useMemo(() => {
    console.log('Calculating expensive value...');
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]); // Only recalculate when items change

  // ✅ Batch related state updates
  const updateMultipleStates = useCallback(() => {
    setCount(prev => prev + 1);
    setItems(prev => [...prev, { id: Date.now(), value: count + 1 }]);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={updateMultipleStates}>Update Multiple</button>
      <p>Items: {items.length}</p>
    </div>
  );
}

---

Security Considerations

Safe State Management:

// Secure state handling
import React, { useState } from 'react';

function SecureStateComponent() {
  const [userInput, setUserInput] = useState('');

  const handleInputChange = (e) => {
    // ✅ Sanitize user input before storing
    const sanitizedInput = e.target.value
      .replace(/[<>]/g, '') // Basic XSS prevention
      .substring(0, 1000); // Limit input length
    
    setUserInput(sanitizedInput);
  };

  return (
    <div>
      <input 
        value={userInput}
        onChange={handleInputChange}
        placeholder="Enter safe input..."
      />
      <p>Safe Output: {userInput}</p>
    </div>
  );
}

---

Common Mistakes to Avoid

1. Not Importing useState:

// ❌ Don't do this
function BadComponent() {
  const [count, setCount] = useState(0); // useState not imported
  return <div>{count}</div>;
}

2. Using Hooks Outside Components:

// ❌ Don't do this
const [state, setState] = useState(0); // Hooks outside component

function Component() {
  return <div>{state}</div>;
}

3. Using Hooks in Loops/Conditions:

// ❌ Don't do this
function BadComponent({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // Hook in condition
  }
  return <div>Content</div>;
}

---

Alternative Solutions

Using React DevTools:

// Component optimized for React DevTools
function DevToolsOptimizedComponent() {
  const [data, setData] = useState(null);
  
  return (
    <div data-testid="usestate-component">
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

Feature Detection:

// Check for useState availability
function useStateChecker() {
  const [hasHooks, setHasHooks] = useState(() => {
    try {
      // This would cause an error if useState isn't available
      return typeof useState === 'function';
    } catch {
      return false;
    }
  });

  return (
    <div>
      {hasHooks ? 'Hooks available' : 'Hooks not available'}
    </div>
  );
}

---

Troubleshooting Checklist

When encountering the useState is not a function error:

1. Check React Import: Ensure React and useState are properly imported
2. Verify React Version: Confirm React version is 16.8 or higher
3. Review Package.json: Check dependencies are correctly specified
4. Validate Component Structure: Ensure hooks are used in functional components
5. Check Build Configuration: Verify module bundler is properly configured
6. Test in Isolation: Create a simple component to verify setup
7. Review Error Messages: Look for additional context in error messages

---

Conclusion

The ‘useState is not a function’ error occurs when React hooks are not properly set up in your project. By ensuring correct imports, proper React version, and appropriate configuration, you can resolve this error and successfully use React hooks in your applications.

The key to resolving this error is understanding React’s hook requirements, implementing proper import patterns, and maintaining correct project configuration. Whether you’re working with simple components or complex applications, the solutions provided in this guide will help you properly set up and use useState in your React applications.

Remember to always verify your React setup, use proper import patterns, and maintain appropriate project configuration to ensure hooks work correctly in your development environment.