How to fix Invalid hook call. Hooks can only be called inside of the body of a function component. in React

// ❌ WRONG - Hook inside condition
function MyComponent() {
  if (someCondition) {
    const [state, setState] = useState(0); // Invalid!
  }
}

// ❌ WRONG - Hook in event handler
function MyComponent() {
  const handleClick = () => {
    const [state, setState] = useState(0); // Invalid!
  };
}

// ✅ CORRECT - Hook at top level
function MyComponent() {
  const [state, setState] = useState(0);
  
  if (someCondition) {
    // Use the state here
  }
}

// ❌ WRONG - Hook in class component
class MyComponent extends React.Component {
  render() {
    const [state, setState] = useState(0); // Invalid!
    return <div>{state}</div>;
  }
}

// ❌ WRONG - Hook in regular function
function myUtilityFunction() {
  const [state, setState] = useState(0); // Invalid!
  return state;
}

// ✅ CORRECT - Hook in function component
function MyComponent() {
  const [state, setState] = useState(0);
  return <div>{state}</div>;
}

// ✅ CORRECT - Hook in custom Hook
function useCustomHook() {
  const [state, setState] = useState(0);
  return state;
}

npm ls react
npm ls react-dom

npm install [email protected] [email protected]

npm update react react-dom

rm -rf node_modules package-lock.json
npm install

npm ls react

npm dedupe

{
  "overrides": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

import React from 'react';
import ReactDOM from 'react-dom';

// Add to your entry file (index.js/main.jsx)
window.React1 = React;
console.log('React instance:', React);

// Then in your component file
import React from 'react';
window.React2 = React;

console.log('Same instance?', window.React1 === window.React2);

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom')
    }
  }
};

// ❌ WRONG - doesn't start with "use"
function myCustomHook() {
  const [state, setState] = useState(0); // May cause issues
  return state;
}

// ✅ CORRECT - proper custom Hook
function useMyCustomHook() {
  const [state, setState] = useState(0);
  return state;
}

// ✅ CORRECT - using the custom Hook
function MyComponent() {
  const value = useMyCustomHook(); // Valid
  return <div>{value}</div>;
}

npm install --save-dev eslint-plugin-react-hooks

module.exports = {
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};