fix: improve null/undefined warning messages for useEffect, useInsertionEffect, and useLayoutEffect#36361
Conversation
…ffect, and useLayoutEffect The existing dev-mode warning for null/undefined `create` callback in useEffect, useInsertionEffect, and useLayoutEffect only mentions a missing callback but does not distinguish between `null` and `undefined`, which is a common source of confusion for beginners. This commit improves the warning messages to: - Mention `null` or `undefined` explicitly - Suggest the most common fix (returning a cleanup function or nothing) - Keep messages consistent across all three effect hooks
|
Hi @BalajiRKB! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
This PR fixes the issue reported in #36362. The vague warning messages for
|
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
| 'React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?', | ||
| `React Hook useEffect received a ${create === null ? 'null' : 'undefined'} effect callback. ` + | ||
| 'useEffect must be passed a function that optionally returns a cleanup function. ' + | ||
| 'Did you accidentally pass nothing or the result of a function call instead of the function itself?', |
There was a problem hiding this comment.
"Did you accidentally pass nothing" phrasing is confusing when create === null, because the user did pass something — they passed null explicitly
Summary
The existing dev-mode
console.warnmessages inuseEffect,useInsertionEffect, anduseLayoutEffect(inpackages/react/src/ReactHooks.js) are vague when thecreatecallback isnullorundefined.Before (all three hooks had this):
This message doesn't distinguish between
nullandundefined, and doesn't explain what the callback should look like, which is a common source of confusion for beginners.After:
Changes
useEffect— improved warning to mentionnullorundefinedexplicitly and explain the expected signatureuseInsertionEffect— same improvement, consistent phrasinguseLayoutEffect— same improvement, consistent phrasingAll three hooks now use template literals to dynamically include whether the value was
nullorundefined, making it easier for developers to quickly understand and fix the issue.Test Plan
No new tests required — this is a dev-mode warning message improvement only. Existing tests for null callback behaviour remain unchanged.
Related
Addresses common confusion reported by beginners around vague hook error messages.