react
react copied to clipboard
Bug: RulesOfHooks can't detect member expression containing a hook name if the object is not in PascalCase
https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L39-L40
const isPascalCaseNameSpace = /^[A-Z].*/;
return obj.type === 'Identifier' && isPascalCaseNameSpace.test(obj.name);
Why is it necessary? Isn't it purely an artificial limitation? Our use case is absolutely valid both from the JS point of view and from React point of view:
const accessor = createEntityAccessor(entityId);
const name = accessor.useName();
Why is it necessary? Isn't it purely an artificial limitation?
It's necessary to have some way to distinguish what is a hook and what isn't. Pascal case was already how almost all hooks were accesed. Meanwhile it doesn't trigger many false-positives and there's a clear path how to avoid it.
For example, getting rid of this check would trigger jest.useFakeTimers which is fairly common in the ecosystems.
It's necessary to have some way to distinguish what is a hook and what isn't.
How about useAccessor.useName()?
We've finally come up with this style as a workaround:
const { useName } = createEntityAccessor(entityId);
const name = useName();
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!