react: Bug: devtools may crash when custom hook has the name "useState"

React version: 17.0.1

Steps To Reproduce

clone repo: https://github.com/avkonst/react-devtools-crash-demo
yarn start
open the browser of the started app
open devtools
click Counter component in the components tab of the development tools
Watch it not loading anything and unhandled exception dumped to the console log

Link to code example: https://github.com/avkonst/react-devtools-crash-demo

The current behavior

Devtools crash when I click on the following component in the development tools:

import React from 'react';

function useState() {
    React.useState(0);
    React.useEffect(() => () => {});
}

function Counter() {
	useState();
	React.useState(0);
	return <div>Open React Dev Tools Components panel,
		click on Counter component and
		observe the crash in the logging console.</div>;
}

export default Counter;

The expected behavior

No crash and the development tools show hooks used.

About this issue

Original URL
State: open
Created 3 years ago
Comments: 29 (16 by maintainers)

Commits related to this issue

workaround for https://github.com/facebook/react/issues/20613 — committed to avkonst/hookstate by avkonst 3 years ago
workaround for https://github.com/facebook/react/issues/20613 — committed to shinyjohn0401/hookstate by deleted user 3 years ago

Most upvoted comments

@rickhanlonii, sure, but I can not rename the hook as it is the interface of the public library and I could not find better name originally. Hookstate.useState is in the different module and naming space than React.useState. It does not cause any conflict for the compiler and bundler, why should it for devtools. Hookstate.useState is the supercharged version of React.useState, hence named identically as it is nearly plug and play replacement.

avkonst on Jan 19, 2021

I wrote this comment only a few moments ago.

I need to sit this task down for now because I have something more pressing to work on. If anyone else feels like picking it up, that would be great. We have pretty good test coverage in react-debug-tools.

It still holds.

bvaughn on Jan 20, 2021

Thanks for the bug report and concise repo. I’ll take a look this morning.

bvaughn on Jan 19, 2021

And thanks @dai-shi for debugging this as well, nice find!

rickhanlonii on Jan 19, 2021

Maybe naming. But devtools should not influence how I name my functions, right? Compiler is happy with this name, so why not…

avkonst on Jan 19, 2021

Issue reproduced, and it’s a naming conflict? Renaming the custom hook to useMyState seems to work. https://codesandbox.io/s/ecstatic-shockley-g1usv

dai-shi on Jan 19, 2021