diff --git a/debug/src/debug.js b/debug/src/debug.js
index ae92dd3d0a..221d8f202b 100644
--- a/debug/src/debug.js
+++ b/debug/src/debug.js
@@ -483,7 +483,7 @@ export function initDebug() {
const arg = hook._args[j];
if (isNaN(arg)) {
const componentName = getDisplayName(vnode);
- throw new Error(
+ console.warn(
`Invalid argument passed to hook. Hooks should not be called with NaN in the dependency array. Hook index ${i} in component ${componentName} was called with NaN.`
);
}
diff --git a/debug/test/browser/validateHookArgs.test.js b/debug/test/browser/validateHookArgs.test.js
index 19f7cb7fd3..5e2b6b6d3b 100644
--- a/debug/test/browser/validateHookArgs.test.js
+++ b/debug/test/browser/validateHookArgs.test.js
@@ -31,18 +31,21 @@ describe('Hook argument validation', () => {
};
it(`should error if ${name} is mounted with NaN as an argument`, async () => {
- expect(() =>
- render(, scratch)
- ).to.throw(/Hooks should not be called with NaN in the dependency array/);
+ render(, scratch);
+ expect(console.warn).to.be.calledOnce;
+ expect(console.warn.args[0]).to.match(
+ /Hooks should not be called with NaN in the dependency array/
+ );
});
it(`should error if ${name} is updated with NaN as an argument`, async () => {
render(, scratch);
- expect(() => {
- scratch.querySelector('button').click();
- rerender();
- }).to.throw(
+ scratch.querySelector('button').click();
+ rerender();
+
+ expect(console.warn).to.be.calledOnce;
+ expect(console.warn.args[0]).to.match(
/Hooks should not be called with NaN in the dependency array/
);
});
@@ -52,14 +55,18 @@ describe('Hook argument validation', () => {
let scratch;
/** @type {() => void} */
let rerender;
+ let warnings = [];
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
+ warnings = [];
+ sinon.stub(console, 'warn').callsFake(w => warnings.push(w));
});
afterEach(() => {
teardown(scratch);
+ console.warn.restore();
});
validateHook('useEffect', arg => useEffect(() => {}, [arg]));