Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks

Question

I've been learning/experimenting with React hooks. When I go to inspect the values of the current state of a component using React DevTools in Chrome, I see the state fine, but the actual 'fields' -- that is, the state variables that are being updated by the individual useState hooks -- don't have any name associated with them. Instead, I see, for example, several strings, a couple of booleans, etc. I can generally figure out what's going on, but this seems problematic -- I'd like to be able to see which what the state variable's name is.

For instance, if I have something like

const [doughnuts, setDoughnuts] = useState(24)

When I look in React DevTools I'd like to see something like `doughnuts: number : 24', instead of just 'number: 24'.

Am I missing some setting somewhere, or some technique to turn on this ability?

Answer 1

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

https://reactjs.org/docs/hooks-rules.html#explanation.

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

Answer 2

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 )

. .

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

Answer 3

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.

2. 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.

Usage:

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

Answer 4

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.

Answer 5

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)