Added dev-only warning for null/undefined create in use*Effect (#32355)
## Summary Fixes #32354. Re-creation of #15197: adds a dev-only warning if `create == null` to the three `use*Effect` functions: * `useEffect` * `useInsertionEffect` * `useLayoutEffect` Updates the warning to match the same text given in the `react/exhaustive-deps` lint rule. ## How did you test this change? I applied the changes manually within `node_modules/` on a local clone of https://github.com/JoshuaKGoldberg/repros/tree/react-use-effect-no-arguments. Please pardon me for opening a PR addressing a not-accepted issue. I was excited to get back to #15194 -> #15197 now that I have time. 🙂 --------- Co-authored-by: lauren <poteto@users.noreply.github.com>
Josh Goldberg ✨ committed
Feb 11, 2025 at 17:01 UTC
192555bb0ed88db30f91c58651c421f178f90384
1 file changed
+24
packages/react/src/ReactHooks.js
+24
@@ -93,6 +93,14 @@ export function useEffect(
93
updateDeps?: Array<mixed> | void | null,
94
destroy?: ((resource: {...} | void | null) => void) | void,
95
): void {
96
+ if (__DEV__) {
97
+ if (create == null) {
98
+ console.warn(
99
+ 'React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?',
100
+ );
101
+ }
102
+ }
103
+
104
const dispatcher = resolveDispatcher();
105
if (
106
enableUseEffectCRUDOverload &&
@@ -118,6 +126,14 @@ export function useInsertionEffect(
126
create: () => (() => void) | void,
127
deps: Array<mixed> | void | null,
128
): void {
129
+ if (__DEV__) {
130
+ if (create == null) {
131
+ console.warn(
132
+ 'React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?',
133
+ );
134
+ }
135
+ }
136
+
137
const dispatcher = resolveDispatcher();
138
return dispatcher.useInsertionEffect(create, deps);
139
}
@@ -126,6 +142,14 @@ export function useLayoutEffect(
142
create: () => (() => void) | void,
143
deps: Array<mixed> | void | null,
144
): void {
145
+ if (__DEV__) {
146
+ if (create == null) {
147
+ console.warn(
148
+ 'React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?',
149
+ );
150
+ }
151
+ }
152
+
153
const dispatcher = resolveDispatcher();
154
return dispatcher.useLayoutEffect(create, deps);
155
}