Is it possible that React Developer Tool shows the name of state variables created using useState?

See this issue:

https://github.com/facebook/react-devtools/issues/1215#issuecomment-479937560

That's the normal behavior for the dev tool when using hooks.

I asked the library author about it, cause I also would like it to show my state variable names. And that's what he said:

@cbdeveloper I haven't thought of a good way for DevTools to be able to display the variable name like you're asking. DevTools doesn't have a way to read your function's private variables, and changing the API to support passing in a display name would increase the size of component code. It also just doesn't seem necessary to me, more like a nice to have.

Anyway, this umbrella issue is not the best place to have discussions like this. If you feel strongly about it, I suggest opening a new issue.

From "normal" useState hook implementation:

const [users, setUser] = useState([]);
const [profile, setProfile] = useState([]);
const [repo, setRepo] = useState([]);
const [loading, setLoading] = useState(false);
const [alert, setAlert] = useState(false);

You can "convert" it in:

const [state, setState] = useState({ users: [], profile: [], repo: [], loading: false, alert: false });

And you will get the following result:

And to set the state you can use the rest operator(source 1 / source 2) and the state you want to set:

// ...state => unchanged states
// alert => state we want to change
setState(state => ({ ...state, alert: true }));

to use it as a prop:

const {
 users,
 profile,
 repo,
 loading,
 alert
} = state;

<SomeComponent loading={loading} alert={alert} />

You see the React docs here and search for: Should I use one or many state variables?