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(', ')}]`,
);
}
}