No random numbers in React

nextjsreacttypescript
Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values

Install this rule for wispbit

Add this rule to wispbit and it will run when you open a pull request

Install this rule for Coderabbit

Copy the configuration below and add it to your repository as .coderabbit.yml in your project root.

reviews:
  path_instructions:
    - path: "*.tsx"
      instructions: |
                
        Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
        
        Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
        
        Instead:
        
        - Generate IDs in useEffect hooks
        - Use stable IDs based on props or state
        - Use refs to store generated values
        - Use libraries that support SSR (like uuid with specific configuration)
        
        Bad:
        
        ```tsx
        function UserCard() {
          // This will generate different values on server and client
          const id = `user-${Math.random()}`
        
          return (
            <div id={id}>
              <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
            </div>
          )
        }
        ```
        
        Good:
        
        ```tsx
        function UserCard({ userId }) {
          // Using stable props for IDs
          const id = `user-${userId}`
        
          // For dynamic IDs, use useEffect and useState
          const [randomId, setRandomId] = useState(null)
        
          useEffect(() => {
            // Generate random values after mounting
            setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
          }, [])
        
          return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
        }
        ```

Install this rule for Greptile

Greptile rules can be added through the web interface. Please see this documentation for details on how to add custom rules and context.

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```

File Path Patterns:

*.tsx

Install this rule for GitHub Copilot

Copilot instructions can be added through the interface. See the documentation for details on how to create coding guidelines.

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```

File Path Patterns:

*.tsx

Install this rule for Graphite Diamond

Diamond custom rules can be added through the interface. See the documentation for details on how to create custom rules.

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```

File Path Patterns:

*.tsx

Use with Cline

Copy the rule below and ask Cline to review your code using this rule

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```

Use with OpenAI Codex

Copy the rule below and ask OpenAI Codex to review your code using this rule

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```

Use with Cursor

Copy the rule below and ask Cursor to review your code using this rule

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```

Use with Claude Code

Copy the rule below and ask Claude Code to review your code using this rule

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```

Install this rule for Windsurf

To set up rules for Windsurf Reviews, please see this documentation 

Do not generate non-deterministic values like random IDs during render in React components. This causes hydration errors because the server-rendered HTML will not match what the client generates.
Avoid using functions like `Math.random()`, `Date.now()`, `uuid()`, or any other source of randomness directly in your render function or JSX.
Instead:
- Generate IDs in useEffect hooks
- Use stable IDs based on props or state
- Use refs to store generated values
- Use libraries that support SSR (like uuid with specific configuration)
Bad:
```tsx
function UserCard() {
  // This will generate different values on server and client
  const id = `user-${Math.random()}`
  return (
    <div id={id}>
      <input aria-labelledby={`label-${Math.floor(Math.random() * 1000)}`} />
    </div>
  )
}
```
Good:
```tsx
function UserCard({ userId }) {
  // Using stable props for IDs
  const id = `user-${userId}`
  // For dynamic IDs, use useEffect and useState
  const [randomId, setRandomId] = useState(null)
  useEffect(() => {
    // Generate random values after mounting
    setRandomId(`label-${Math.floor(Math.random() * 1000)}`)
  }, [])
  return <div id={id}>{randomId && <input aria-labelledby={randomId} />}</div>
}
```