[DevTools Bug] Minified React error #310; visit https://react.dev/errors/310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

[ayush11-ap]

Website or app

http://localhost:1234/restaurants/323532

Repro steps

i'm not able to open components features and use it properly

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

6.0.1-c7c68ef842

Error message (automated)

Minified React error #310; visit https://react.dev/errors/310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error call stack (automated)

at updateWorkInProgressHook (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:53845)
    at Object.updateCallback [as useCallback] (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:63009)
    at t.useCallback (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:222673)
    at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1329500)
    at renderWithHooks (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:52283)
    at updateFunctionComponent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:81757)
    at beginWork (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:95976)
    at performUnitOfWork (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:154382)
    at workLoopSync (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:154250)
    at renderRootSync (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:153981)

Error component stack (automated)

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1328724)
    at da (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1315454)
    at div (<anonymous>)
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1321764)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1354133)
    at div (<anonymous>)
    at div (<anonymous>)
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1268367)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1297652)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1393839
    at da (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1315454)
    at div (<anonymous>)
    at div (<anonymous>)
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1318165)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1318362
    at div (<anonymous>)
    at div (<anonymous>)
    at div (<anonymous>)
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1318165)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1395852)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1387571)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1209877)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1238028)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1375269)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1544258)

GitHub query string (automated)

https://api.github.com/search/issues?q=Minified React error #310; visit https://react.dev/errors/310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[ac3030]

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1328724)
at da (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1315454)
at div ()
at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1321764)
at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1354133)
at div ()
at div ()
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1268367)
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1297652)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1393839
at da (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1315454)
at div ()
at div ()
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1318165)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1318362
at div ()
at div ()
at div ()
at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1318165)
at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1395852)
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1387571)
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1209877)
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1238028)
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1375269)
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1544258)

[JorensM]

By the sound of the error, you are probably conditionally calling hooks somewhere in your code. Hooks need to remain in the same order each time they are rendered, and when you conditionally remove/add a hook (even if temporarily), it messes with how React calls these hooks. They have to be called in the same order each render.

If you could look through your code and find any occurrences of conditional hook calls, and maybe shared it if you still can't figure it out, and if that's possible, that would be nice.

[Abhsihekkaul]

Hey i am receiving the same error JorensM
and i have pasted my code please check why is this error coming
`
import React, { useState } from "react";

const Instamart = () => {
const Section = ({ Section_name, Section_description }) => {
const [isVisible, setIsVisible] = useState(false); // Independent state for each section

return (
  <div className="m-4 p-4 border border-gray-300 rounded-lg shadow-md">
    <h1 className="text-3xl m-1 p-1">{Section_name}</h1>
    <button
      onClick={() => setIsVisible(!isVisible)}
      className="mt-2 px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-500"
    >
      {isVisible ? "Hide" : "Show"}
    </button>
    {isVisible && <p>{Section_description}</p>}
  </div>
);

};

return (

  <Section
    Section_name="Team"
    Section_description="Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of."
  />

  <Section
    Section_name="Love for Instamart"
    Section_description="Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes fromContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, sections 1.10.32 and 1.10.33 of."
  />
</div>

);
};

export default Instamart;

`