Warn if you pass a hidden prop to Activity (#32916)

Since `hidden` is a prop on arbitrary DOM elements it's a common mistake
to think that it would also work that way on `<Activity>` but it
doesn't. In fact, we even had this mistakes in our own tests.

Maybe there's an argument that we should actually just support it but we
also have more modes planned.

So this adds a warning. It should also already be covered by TypeScript.

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -873,6 +873,22 @@ function updateActivityComponent(
   renderLanes: Lanes,
 ) {
   const nextProps: ActivityProps = workInProgress.pendingProps;
+  if (__DEV__) {
+    const hiddenProp = (nextProps: any).hidden;
+    if (hiddenProp !== undefined) {
+      console.error(
+        '<Activity> doesn\'t accept a hidden prop. Use mode="hidden" instead.\n' +
+          '- <Activity %s>\n' +
+          '+ <Activity %s>',
+        hiddenProp === true
+          ? 'hidden'
+          : hiddenProp === false
+            ? 'hidden={false}'
+            : 'hidden={...}',
+        hiddenProp ? 'mode="hidden"' : 'mode="visible"',
+      );
+    }
+  }
   const nextChildren = nextProps.children;
   const nextMode = nextProps.mode;
   const mode = workInProgress.mode;

packages/react-reconciler/src/__tests__/Activity-test.js

@@ -732,7 +732,7 @@ describe('Activity', () => {
 
     const root = ReactNoop.createRoot();
     await act(() => {
-      root.render(<Activity hidden={false} />);
+      root.render(<Activity />);
     });
     assertLog([]);
     expect(root).toMatchRenderedOutput(null);
@@ -741,7 +741,7 @@ describe('Activity', () => {
       // Partially render a component
       startTransition(() => {
         root.render(
-          <Activity hidden={false}>
+          <Activity>
             <Child />
             <Text text="Sibling" />
           </Activity>,
@@ -1480,4 +1480,28 @@ describe('Activity', () => {
     assertLog([]);
     expect(root).toMatchRenderedOutput(<span prop={2} />);
   });
+
+  // @gate enableActivity
+  it('warns if you pass a hidden prop', async () => {
+    function App() {
+      return (
+        // eslint-disable-next-line react/jsx-boolean-value
+        <Activity hidden>
+          <div />
+        </Activity>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(<App show={true} step={1} />);
+    });
+    assertConsoleErrorDev([
+      '<Activity> doesn\'t accept a hidden prop. Use mode="hidden" instead.\n' +
+        '- <Activity hidden>\n' +
+        '+ <Activity mode="hidden">\n' +
+        '    in Activity (at **)\n' +
+        '    in App (at **)',
+    ]);
+  });
 });