Accepted answer

You are not missing anything and you can't change this behaviour. This is how React deals with multiple state.

One way to avoid this problem is to use a single State Hook which creates a single state including all the data.

const [state, setState] = useState({doughnuts: 24, key1: 'value1', key2: 'value2'});

In this case the state is stored in a single object and each value is associated with a key.

Take a look at this: Should I use one or many state variables?

A compound state is hard to manage, but there is a tool which can help you with that: useReducer Hook


You can use useDebugState hook from use-named-state package.

import { useDebugState } from "use-named-state";
const App = () => {
  const [counter, setCounter] = useDebugState("counter", 0);

  return <button onClick={(prevCount) => prevCount + 1}>{counter}</button>;

It internally uses useDebugValue hook from react (method suggested by @Venryx)


When you do the following operation

const [item, setItem] = useSate(2)

You're using destructuring assignment in an array a type which does not contain a key like an object. You're just creating an alias to access the first element of the array returned by useState. If you do something like this

const [item, setItem] = useState({value: 2})

You will be able to see value: 2 in your dev-tools, cause it reflects the current state of that hook at a certain point of time.

Each time you call a Hook, it gets isolated local state within the currently executing component based on the previous value, so the identifier attributed by you (item) will only be scoped to that render cycle, but it doesn't mean that React reference is using the same identifier.


Some approaches not mentioned in the other answers:

  1. Use the following:(suggested by Oleh)
const [{ item }, setItem] = useState({ item: 2 });

You could also wrap the useState function so that, based on the shape of the initial value, the setItem function it returns auto-converts from the passed value itself into an object with the correct (wrapper) shape.

  1. Create a new useStateWithLabel function:
function useStateWithLabel(initialValue, name) {
    const [value, setValue] = useState(initialValue);
    useDebugValue(`${name}: ${JSON.stringify(value)}`);
    return [value, setValue];

It's based on the useDebugValue function described here.


const [item, setItem] = useStateWithLabel(2, "item");


Finally react team listened to us

The recent introduction of parsing custom hooks in react dev tools option might help

Before parsing ( before clicking the magic button in custom hooks card )

enter image description here

. enter image description here .

After parsing ( clicking the magic button in the top right )

enter image description here

Related Query

More Query from same tag