diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index 0450495ff0d4..8ea915b50072 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -483,8 +483,8 @@ function areHookInputsEqual( 'Previous: %s\n' + 'Incoming: %s', currentHookNameInDev, - `[${prevDeps.join(', ')}]`, - `[${nextDeps.join(', ')}]`, + `[${prevDeps.map(String).join(', ')}]`, + `[${nextDeps.map(String).join(', ')}]`, ); } } diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js index e61e4a825602..e4e546f2674f 100644 --- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js @@ -591,6 +591,33 @@ describe('ReactHooks', () => { ]); }); + it('warns about variable number of dependencies when deps contain Symbols', async () => { + const {useLayoutEffect} = React; + const sym = Symbol('testSymbol'); + function App(props) { + useLayoutEffect(() => {}, props.dependencies); + return null; + } + let root; + await act(() => { + root = ReactTestRenderer.create(, { + unstable_isConcurrent: true, + }); + }); + await act(() => { + root.update(); + }); + assertConsoleErrorDev([ + 'The final argument passed to useLayoutEffect changed size ' + + 'between renders. The order and size of this array must remain ' + + 'constant.\n' + + '\n' + + 'Previous: [Symbol(testSymbol)]\n' + + 'Incoming: [Symbol(testSymbol), extra]\n' + + ' in App (at **)', + ]); + }); + it('warns if switching from dependencies to no dependencies', async () => { const {useMemo} = React; function App({text, hasDeps}) { diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index 24e676fc7108..d1d853f0c85f 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -151,8 +151,8 @@ function areHookInputsEqual( 'Previous: %s\n' + 'Incoming: %s', currentHookNameInDev, - `[${nextDeps.join(', ')}]`, - `[${prevDeps.join(', ')}]`, + `[${nextDeps.map(String).join(', ')}]`, + `[${prevDeps.map(String).join(', ')}]`, ); } }