claude you suck ass at git for real my guy

Author: rickhanlonii

src/content/errors/321.md

@@ -0,0 +1,127 @@
+<Intro>
+
+This page explains this React error and common ways to fix it.
+
+</Intro>
+
+The full text of the error is:
+
+<ErrorDecoder />
+
+<Note>
+
+In the minified production build of React, full error messages are replaced with short codes to reduce bundle size. We recommend using the development build when debugging, as it includes additional warnings and debug information.
+
+</Note>
+
+## What This Error Means {/*what-this-error-means*/}
+
+This error occurs when a Hook is called in a way that violates the [Rules of Hooks](/reference/rules/rules-of-hooks):
+
+```js {4}
+export default function Counter() {
+  function handleClick() {
+    // 🔴 Invalid Hook call!
+    const [count, setCount] = useState(0);
+    setCount(count + 1);
+  }
+
+  return <button onClick={handleClick}>Click me</button>;
+}
+```
+
+You can only call Hooks at the top level of a function component or a custom Hook. React tracks Hooks by associating them with the component that is currently rendering. When you call a Hook and no component is rendering, React cannot associate the Hook with a component, and throws this error.
+
+The most common cause is calling a Hook outside a function component. For example, inside an event handler, a class component, or a regular function. Another common cause is having **multiple copies of React** loaded in your app, which is a build configuration problem, not a coding mistake.
+
+[See the examples below for common causes and how to fix them.](#common-causes)
+
+## Common Causes {/*common-causes*/}
+
+### Calling a Hook outside the body of a function component {/*calling-a-hook-outside-the-body-of-a-function-component*/}
+
+React requires you to call Hooks at the top level of a function component or a custom Hook—not inside event handlers, nested functions, or class components.
+
+Here is an example of code that would trigger this error:
+
+<Sandpack>
+
+```js {expectedErrors: {'react-compiler': [7]}}
+import { useState } from 'react';
+
+export default function Counter() {
+  function handleClick() {
+    // 🔴 useState is called inside an event handler, not the component body
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [count, setCount] = useState(0);
+    setCount(count + 1);
+  }
+
+  return <button onClick={handleClick}>Click me</button>;
+}
+```
+
+</Sandpack>
+
+To fix this, move the Hook call to the top level of your component:
+
+<Sandpack>
+
+```js
+import { useState } from 'react';
+
+// ✅ Fixed: useState is called at the top level of the component
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return <button onClick={handleClick}>Count: {count}</button>;
+}
+```
+
+</Sandpack>
+
+The same rule applies to class components—you cannot use Hooks in class components. If you need state or other React features in a class component, [convert it to a function component](/reference/react/Component#alternatives).
+
+### Multiple copies of React in your app {/*multiple-copies-of-react*/}
+
+If your project uses a monorepo, `npm link`, or a third-party package that bundles its own copy of React, you can end up with two separate copies of React loaded at the same time. When this happens, the copy of React that your component uses is different from the copy that `react-dom` uses, and Hooks break because React can't track them across copies.
+
+To check if this is your problem, run the following from your project root:
+
+```bash
+npm ls react
+```
+
+If you see more than one entry for `react`, you have duplicate copies. You can also add a temporary log to confirm. Add this at the top of your component file:
+
+```js
+import React from 'react';
+console.log(React === window.React); // false means duplicates
+```
+
+If you're using webpack, you can fix this by adding a resolve alias in your webpack config:
+
+```js
+// webpack.config.js
+module.exports = {
+  resolve: {
+    alias: {
+      react: require.resolve('react'),
+      'react-dom': require.resolve('react-dom'),
+    },
+  },
+};
+```
+
+If you're using Vite, add a similar alias in your Vite config. For other bundlers, consult their documentation on how to configure module aliases.
+
+## Related Documentation {/*related-documentation*/}
+
+- [Rules of Hooks](/reference/rules/rules-of-hooks)
+- [`useState`](/reference/react/useState)
+- [Your First Component](/learn/your-first-component)
+- [Reusing Logic with Custom Hooks](/learn/reusing-logic-with-custom-hooks)

src/content/errors/377.md

@@ -1,17 +1,13 @@
 <Intro>
 
-This page explains this React error and common ways to fix it.
+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
 
 </Intro>
 
-The full text of the error is:
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message.
 
-<ErrorDecoder />
-
-<Note>
+The full text of the error you just encountered is:
 
-In the minified production build of React, full error messages are replaced with short codes to reduce bundle size. We recommend using the development build when debugging, as it includes additional warnings and debug information.
-
-</Note>
+<ErrorDecoder />
 
 This error occurs when you pass a BigInt value from a Server Component to a Client Component.