Forem: AiVIS Cite Ledger

React Component Breaks UI Re-Render - Why Math.random Violates Purity Rules

AiVIS Cite Ledger — Fri, 08 May 2026 10:18:37 +0000

The bug nobody notices until production

→ Component re-renders → new random → broken key/ID/animation

React throws hydration errors and unstable UI updates when you call Math.random directly in component bodies because it returns different values on every render cycle breaking the idempotency requirement that components must always produce identical output for identical inputs. The fix is wrapping randomness in useState with lazy initialization or switching to crypto.randomUUID for stable unique identifiers that only compute once during component mount and persist across re-renders without causing server client mismatches in SSR environments.

Why This Breaks Your App Before You Even Notice

Every time React re-renders your component the Math.random call executes again producing a completely different value. This violates the core purity rule documented at react.dev/reference/rules/components-and-hooks-must-be-pure where components must be idempotent meaning identical inputs produce identical outputs. When you deploy to production with server-side rendering the server generates one random value during HTML generation but the client generates a different random value during hydration causing the infamous hydration mismatch error that crashes your app.

React Strict Mode in development intentionally double renders components to expose these purity violations. If you see different random values printed twice in console logs during development that signals your component will fail unpredictably in production when Concurrent Mode or Suspense triggers unexpected re-renders.

The technical reason goes deeper into how React reconciliation works. React expects that given the same props state and context a component returns the same JSX tree. When you inject non-deterministic functions like Math.random or Date.now into the render path React cannot reliably determine what changed between renders leading to unnecessary DOM updates memory leaks and visual flickers.

How useState and useMemo Actually Solve This

Both hooks freeze the random value at mount time preventing it from changing on subsequent re-renders. The difference is when and how they compute the initial value.

useState with lazy initialization calls the function exactly once when the component mounts then stores that result in React internal state. Every re-render returns the same stored value without re-executing Math.random. The lazy initializer syntax useState(() => Math.random()) is critical because passing Math.random() directly would call it during every render before useState even receives the value.

const [id] = useState(() => Math.random());

This pattern works because the arrow function acts as a factory that React invokes only during the initial mount phase. Subsequent re-renders skip the factory and return the cached state value.

useMemo with an empty dependency array also runs the computation once and caches the result but the timing differs slightly. useMemo executes during the render phase while useState lazy initializers run before render making useState slightly more predictable for initialization logic.

const id = useMemo(() => Math.random(), []);

Both approaches satisfy React purity requirements by ensuring the component returns the same output for the same inputs across all renders.

Top 10 Critical Issues Using Math.random in React

1. SSR Hydration Mismatch

Server renders one random value client renders different value causing React to discard server HTML and re-render everything from scratch. This destroys performance benefits of SSR and creates visible content flashes.

2. Strict Mode Double Execution

Development mode intentionally calls your component twice to detect impure functions. Math.random returns different values each time making your component fail the purity test and exposing instability before production.

3. Concurrent Mode Interruptions

React 18 Concurrent Mode can pause and restart renders mid-execution. Each restart re-runs Math.random producing inconsistent component state that causes visual bugs and broken UI interactions.

4. Unstable Keys in Lists

Using Math.random for React key props destroys reconciliation. React cannot track which items changed because keys differ on every render forcing complete list re-renders and losing focus state in inputs.

5. Inconsistent useEffect Dependencies

If you pass a Math.random value into useEffect dependency array the effect re-runs on every render because the dependency always changes. This creates infinite loops and performance degradation.

6. Race Conditions in Async Code

Components that use Math.random for request IDs or cache keys fail when re-renders happen during async operations. The ID changes mid-request causing responses to be ignored or applied to wrong components.

7. Test Instability

Unit tests fail randomly because Math.random produces different outputs each run. Tests become flaky and unreliable forcing developers to add arbitrary sleeps or retry logic that masks real bugs.

8. State Initialization Bugs

Passing Math.random() directly to useState without lazy initialization calls it every render before useState even receives the value. The state appears stable but the random call still executes causing side effects and performance hits.

9. Snapshot Testing Failures

Jest snapshot tests always fail because rendered output includes random values that change every test run. Developers waste time updating snapshots or disabling tests instead of catching real regressions.

10. Browser Extension Conflicts

Some browser extensions inject scripts that trigger extra re-renders. Components using Math.random produce different values during these unintended re-renders creating visual inconsistencies that only appear for users with specific extensions installed.

Crypto.getRandomValues vs Math.random Security and Performance

Math.random uses a pseudo-random number generator with a fixed algorithm and internal seed state making the sequence theoretically predictable. This implementation is deterministic meaning if an attacker discovers the seed they can reproduce the entire sequence of random numbers.

Crypto.getRandomValues uses the operating system entropy pool pulling randomness from hardware events like mouse movements disk timings and thermal noise. This makes it cryptographically secure because no algorithm can predict the next value even with knowledge of all previous values.

const array = new Uint32Array(1);
crypto.getRandomValues(array);
const randomNumber = array[0];

The performance difference is negligible for UI use cases. Crypto operations add microseconds of overhead which becomes irrelevant compared to React render times and DOM updates. For generating component IDs authentication tokens or any security-sensitive values always use crypto over Math.random.

Math.random returns a single float between 0 and 1 requiring manual scaling and rounding to get integers. Crypto.getRandomValues fills typed arrays with integers directly avoiding floating point precision issues.

// Math.random requires manual conversion
const id = Math.floor(Math.random() * 1000000);

// crypto.randomUUID gives clean strings
const id = crypto.randomUUID();

Better Alternatives Ranked by Use Case

React useId for Accessibility

React 18 introduced useId specifically for generating stable unique IDs that work in SSR. This hook produces deterministic IDs that match between server and client eliminating hydration mismatches completely.

function FormField() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Name</label>
      <input id={id} type="text" />
    </>
  );
}

Use this for linking labels to inputs ARIA attributes and any DOM ID requirements. It requires zero configuration and never causes hydration errors.

crypto.randomUUID for Unique Identifiers

Native browser API available in all modern environments returns RFC 4122 compliant UUIDs as strings. No dependencies required and works in both browser and Node.js environments.

const [sessionId] = useState(() => crypto.randomUUID());

Perfect for session IDs tracking tokens and user-facing identifiers where format consistency matters.

nanoid for Custom ID Requirements

NPM package that generates URL-safe unique strings with configurable length and alphabet. Smaller output than UUID and 60% faster.

import { nanoid } from 'nanoid';
const id = nanoid(); // "V1StGXR8_Z5jdHi6B-myT"
const shortId = nanoid(10); // "IRFa-VaY2b"

Install with npm i nanoid and use when you need compact IDs for URLs database keys or high-volume ID generation.

pure-rand for Reproducible Testing

Seedable random number generator that produces identical sequences from identical seeds enabling deterministic tests. Critical for snapshot testing game simulations and debugging random failures.

import { pureRand } from 'pure-rand';
const rng = pureRand(12345); // fixed seed
const [value, nextRng] = rng.next();

Use in test suites where you need reproducible randomness to verify algorithm correctness. Production code should never use seeded randomness for security-sensitive operations.

Module-Level Generation for Static Values

Define random values outside component scope if they never need to change across component instances.

const STATIC_ID = crypto.randomUUID();

function Component() {
  return <div data-session={STATIC_ID} />;
}

Only works when all component instances share the same value. Not suitable for per-instance uniqueness.

Decision Matrix for Choosing the Right Approach

Need stable accessible DOM IDs for forms use React useId hook.
Need unique per-component instance IDs use useState(() => crypto.randomUUID()).
Need security tokens auth keys or password resets use crypto.getRandomValues or crypto.randomUUID.
Need reproducible randomness for tests or simulations use pure-rand with fixed seeds.
Need high-performance compact IDs for URLs or databases use nanoid.

Never use bare Math.random in component render paths.
Never pass Math.random() directly to useState without lazy initialization.
Never use Math.random for security-sensitive values like tokens or session IDs.

Reference Sources

React Official Documentation: https://react.dev/reference/rules/components-and-hooks-must-be-pure
React Purity Rules: https://react.dev/reference/rules
Next.js Hydration Errors: https://nextjs.org/docs/messages/react-hydration-error
React GitHub Issue on Math.random: https://github.com/facebook/react/issues/23091
React useId Hook Guide: https://dev.to/joodi/useid-hook-in-react-l6m
nanoid GitHub Repository: https://github.com/ai/nanoid
Math.random vs Crypto Comparison: https://www.petermekhaeil.com/til/js-math-random-vs-crypto/
Why NanoID Replacing UUID: https://blog.bitsrc.io/why-is-nanoid-replacing-uuid-1b5100e62ed2
UUID Generation Methods: https://geshan.com.np/blog/2022/01/nodejs-uuid/
Pure RNG Implementation: https://jcd.pub/2025/03/14/pure-rng/

Key Takeaways

Math.random in React component bodies violates purity rules causing hydration mismatches and unstable re-renders
useState with lazy initialization useState(() => Math.random()) freezes random values at mount time
crypto.randomUUID provides cryptographically secure UUIDs without external dependencies
React useId hook solves accessibility ID requirements with zero hydration risk
nanoid offers compact URL-safe IDs 60% faster than UUID for high-volume generation
pure-rand enables reproducible testing with seeded random sequences
Never use Math.random for security tokens authentication or any cryptographic purpose
SSR environments require deterministic ID generation to prevent server-client mismatches
Strict Mode double rendering exposes impure function calls during development
Concurrent Mode can restart renders causing Math.random to produce inconsistent values

AiVIS.biz CITE LEDGER verifies whether AI answer engines: can verify, interpret, extract and cite your website

AiVIS Cite Ledger — Fri, 17 Apr 2026 20:52:47 +0000

AiVIS.biz (est. 2026) is an AI entity integrity system built on its Cite Ledger and BRAG Evidence Link registry.

It records verifiable citations, assigns evidence IDs, and measures how AI models interpret, merge, and attribute digital entities. AiVIS identifies attribution gaps, entity drift, and citation accuracy across AI search systems using structured, evidence-based analysis.

AiVIS.biz CITE LEDGER verifies whether AI answer engines: ChatGPT, Perplexity, Google Gemini AI and Claude; can verify, interpret, extract and cite your website.

Enter any URL to get a 0-100 evidence-linked score tied to BRAG-methodology-findings, fostering consistently verifiable category grades and prioritized Autofix GitHub protocols.

Every recommendation is grounded systematically in real page evidence through 'Based-Retrieval-Auditable-Grading' - BRAG (https://github.com/dobleduche/brag). No assumptions, no AI hallucinations, just reliable, actionable code-to-page mappings that show exactly what needs to be fixed and why.

I Audited 500+ Websites. JSON-LD Is the #1 Factor for AI Citation.

AiVIS Cite Ledger — Mon, 06 Apr 2026 22:02:18 +0000

I want to start with a statement that I can back up with data: the websites most likely to get cited by ChatGPT, Perplexity, Claude, and Google AI Overview in 2026 are not the ones with the most backlinks, the fastest load times, or the most content.

They're the ones with the clearest machine-readable identity declarations.

Specifically: well-formed JSON-LD schema markup.

After running AI visibility audits on hundreds of websites through AiVIS, I've found that JSON-LD quality is the single highest-leverage technical signal that determines citation eligibility. A site with mediocre content but excellent schema will consistently outperform a site with excellent content and mediocre or missing schema.

This post is going to give you the exact JSON-LD templates I've seen perform best, explain why each property matters to AI inference pipelines, and walk you through how to validate what you've built.

Let me be direct: this is not about SEO. This is about making your website legible to machines that are not Googlebot.

Why JSON-LD Is Different From On-Page SEO

To understand why this matters, you need to understand how AI models retrieve and evaluate sources.

Claude processes HTML documents. It converts them to a markdown-like internal representation. It cannot execute JavaScript and it cannot see content that's loaded dynamically. What it can parse - reliably, consistently - is the raw content of <script type="application/ld+json"> tags, because these are static strings embedded directly in the HTML source.

ChatGPT relies heavily on Bing's index for real-time web content. Bing's structured data parser extracts JSON-LD from pages and stores it in knowledge graph entries alongside the page content. When an entity or page is queried, Bing returns both the prose content and the structured data. ChatGPT has access to both. The schema data helps resolve entity ambiguity - meaning it helps the model confirm that "Acme Corp the accounting firm" and "Acme Corp" in a Reddit thread are the same entity.

Perplexity crawls with a Chromium-based renderer but prioritizes static HTML for speed. It uses structured data to classify source types. A page with @type: FAQPage gets treated differently by Perplexity's synthesis pipeline than a page with no schema - the former is flagged as a structured Q&A source and its question-answer pairs are candidates for direct answer extraction.

Google AI Overview has the most sophisticated schema processing of the four, inheriting years of Google's structured data investment. Schema in Google's context is almost a direct signal into AI answer construction. Pages with valid, complete structured data are more likely to be selected as sources because the model has high confidence about what kind of content it's dealing with.

In all four cases: schema reduces ambiguity. Reduced ambiguity increases citation probability.

The Entity Declaration: Your Most Important Schema Block

Every page on your site that you want cited should have an Organization or Person entity declaration. This is the foundation everything else builds on.

For businesses and SaaS products:

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Company Name",
  "alternateName": "YCN",
  "url": "https://yourdomain.com",
  "logo": {
    "@type": "ImageObject",
    "url": "https://yourdomain.com/logo.png",
    "width": 400,
    "height": 120
  },
  "description": "One precise sentence about what the company does and who it serves.",
  "foundingDate": "2022",
  "sameAs": [
    "https://linkedin.com/company/yourcompany",
    "https://twitter.com/yourhandle",
    "https://github.com/yourorg",
    "https://news.ycombinator.com/from?site=yourdomain.com"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "customer support",
    "availableLanguage": "English",
    "contactOption": "TollFree"
  },
  "knowsAbout": [
    "AI visibility",
    "structured data",
    "machine legibility",
    "citation readiness"
  ]
}

Why each property matters:

alternateName - Helps models resolve abbreviated references. If people refer to you as "YCN" anywhere on the web, this property connects the abbreviation to the full entity.

sameAs array - This is identity verification across the open web. Every entry is a cross-reference point that AI models use to confirm your entity is real and active. Minimum 2. Optimally 4-5. Include platforms where you're actually active-a dead Twitter with no posts since 2020 is noise.

knowsAbout - Declares your topical authority explicitly. Models use this to determine relevance during query matching. If your knowsAbout array includes the same terminology a user's query uses, your entity gets scored higher for relevance. https://aivis.biz/glossary

foundingDate - Signals entity age. AI models weight established entities more than recently-created ones for trust scoring. A company founded in 2019 has more implicit trust than one founded in 2026, especially for financial or health topics.

Article Schema for Blog Posts and Editorial Content

Every blog post, guide, or editorial piece you want cited needs Article or BlogPosting schema on its individual page. Do not rely on homepage schema for article-level citations.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Exact Article Title Here",
  "description": "Two to three sentence summary of what this article covers and who it's for.",
  "url": "https://yourdomain.com/blog/your-article-slug",
  "datePublished": "2026-01-15",
  "dateModified": "2026-03-01",
  "author": {
    "@type": "Person",
    "name": "Author Full Name",
    "url": "https://yourdomain.com/about/author-name",
    "sameAs": [
      "https://linkedin.com/in/authorhandle",
      "https://twitter.com/authorhandle"
    ]
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Company Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yourdomain.com/logo.png"
    }
  },
  "image": {
    "@type": "ImageObject",
    "url": "https://yourdomain.com/blog/your-article-hero-image.jpg",
    "width": 1200,
    "height": 630
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://yourdomain.com/blog/your-article-slug"
  },
  "articleSection": "AI Visibility",
  "keywords": ["AI citation", "structured data", "LLM optimization", "schema markup"],
  "wordCount": 1850
}

Critical properties for AI citation specifically:

dateModified - Never omit this. AI models weight content freshness. A datePublished without a dateModified signals that the content has never been updated since it was originally posted. For fast-moving topics, this tanks your citation probability. Even minor content updates should trigger a dateModified update.

author.sameAs - Author identity verification is how AI models score expertise claims. Claude specifically uses author entity data to evaluate whether a source is trustworthy for YMYL (Your Money or Your Life) topics - health, finance, legal, major decisions. A named author linked to a verifiable LinkedIn profile carries significantly more trust weight than an anonymous post.

wordCount - Yes, declare it explicitly. AI models checking content depth use this as a quick sufficiency signal. A declared wordCount: 350 tells the model upfront that this is a thin piece. A declared wordCount: 2100 signals depth without requiring the model to count.

articleSection - Maps your content to a topical category. Helps models file your content correctly in their internal relevance ranking.

FAQPage Schema: The Citation Machine

I've saved this one for its own section because FAQPage schema is the highest citation-density markup type available.

When Perplexity processes a query, its answer synthesis pipeline specifically looks for structured Q&A pairs. FAQPage schema is a declaration that says: this page contains a collection of question-answer pairs on a defined topic. This is structurally identical to how AI models process queries. A user asks a question. The model synthesizes an answer. If your FAQ has the question the user asked, your page is a near-exact match for citation.

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is the most important technical factor for AI citation readiness?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD structured data, specifically Organization schema with sameAs identity verification and Article or FAQPage markup on content pages. Without entity declaration schema, AI models cannot reliably identify and trust your site as a citation source."
      }
    },
    {
      "@type": "Question",
      "name": "How do I check if my website is blocking AI crawlers?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Check your robots.txt file at yourdomain.com/robots.txt and look for User-agent entries for GPTBot, ClaudeBot, PerplexityBot, and CCBot. If any of these have a Disallow: / rule, that crawler cannot access your content. Use the AiVIS Robots Checker at aivis.biz/tools/robots-checker for a graded assessment."
      }
    },
    {
      "@type": "Question",
      "name": "Does Core Web Vitals performance affect AI citation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Minimally. AI models don't score LCP or CLS. Page load time only becomes a factor when response time exceeds 5-6 seconds, at which point crawlers may time out. Below that threshold, PageSpeed scores have no meaningful correlation with AI visibility scores."
      }
    }
  ]
}

Implementation rules:

Keep answers between 40-160 words. Long enough to be substantive. Short enough that the full answer can be extracted as a snippet.
Write answers as complete, standalone statements. The answer to "How do I X?" should be fully comprehensible without reading the question.
Use 5-10 Q&A pairs per page minimum. Under 5 is sparse. Over 15 starts adding noise.
The questions you include should be real questions your audience actually asks - pull from customer support emails, sales call notes, Reddit threads, and "People also ask" boxes.

Product/Service Schema for SaaS and B2B Pages

If you're running a SaaS product or a B2B service, your pricing and features pages need schema that declares what you offer, who it's for, and how much it costs.

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Your Product Name",
  "url": "https://yourdomain.com",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web",
  "description": "What your product does in 2-3 sentences. Be specific about the problem it solves and who it solves it for.",
  "offers": {
    "@type": "Offer",
    "name": "Starter Plan",
    "description": "Basic feature set for individual users",
    "price": "49.00",
    "priceCurrency": "USD",
    "priceSpecification": {
      "@type": "UnitPriceSpecification",
      "price": "49.00",
      "priceCurrency": "USD",
      "unitText": "MONTH"
    },
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "128",
    "bestRating": "5",
    "worstRating": "1"
  },
  "creator": {
    "@type": "Organization",
    "name": "Your Company Name",
    "url": "https://yourdomain.com"
  }
}

The aggregateRating property is especially important if you have genuine reviews anywhere. AI models use rating data as a proxy trust signal - a product with 128 verified reviews is more legitimate than one with none, even if the product quality is identical. Pull your Trustpilot, G2, or Product Hunt aggregate rating and declare it here. Keep it current - stale or inaccurate review data that contradicts what's on third-party review platforms will damage trust rather than build it.

The llms.txt File: The Missing Piece Most Sites Haven't Added

This is emerging infrastructure and worth setting up now rather than waiting.

llms.txt is a proposed standard (analogous to robots.txt) that lets you declare AI-specific crawl guidelines and provide a curated map of your content for LLM processing. You host it at yourdomain.com/llms.txt.

The basic format:

Company Name

A one-sentence description of what your site is and who it's for.

Core Content

Product Overview: Main product description
Pricing: Current plans and pricing
How It Works: Technical methodology
Documentation: Full technical documentation
Case Studies: Customer results

Blog / Articles

Getting Started Guide: Beginner guide
Best Practices: Advanced usage patterns

Optional

API Reference: Developer API documentation




Perplexity and some Anthropic crawlers are already actively checking for `llms.txt` as a navigation aid. Sites that have it provide a pre-curated list of their most important pages, helping crawlers prioritize high-value content over boilerplate and navigation pages.

Implementation: Create the file, host it at the root of your domain, and declare its existence in your Organization schema with a `url` property pointing to it. Then add it to your sitemap.


## Validating What You've Built

Never assume your schema is working correctly after implementation. Schema bugs are silent - they don't throw errors or break anything. They just fail to be parsed. https://aivis.biz/methodology

**Google Rich Results Test** - the canonical validator. Paste your URL or raw JSON-LD and it will flag invalid properties, missing required fields, and deprecation warnings. Use this for every schema type except FAQPage, where Google has reduced their rich result surface.

**Schema.org Validator** - schema.org/validator - validates against the full Schema.org vocabulary, which is broader than what Google enforces. Catches issues that Google's tool misses.

**AiVIS Schema Validator** - [aivis.biz/tools/schema-validator](https://aivis.biz/tools/schema-validator) - validates JSON-LD but also checks Open Graph, Twitter Card, and Microdata simultaneously in one pass. Specifically tests for the properties AI citation pipelines care about, not just what Google surfaces. Free, no account.

**Browser DevTools quick check** - In Chrome, go to your page, open DevTools, go to Elements, and search for `application/ld+json`. You should see your JSON-LD blocks as static script tags. If you don't see them - if your schema is being injected by JavaScript after page load - Claude and other non-JS-executing scrapers cannot see it. Inline it in your server-rendered HTML.


## The Implementation Priority Order

If you're starting from scratch or [auditing](https://aivis.biz/guide) a site that has no schema currently, here's the order to implement:

1. **Organization schema** on every page (global include via your layout/template)
2. **llms.txt** at your domain root
3. **Article schema** on every blog post, guide, and editorial piece
4. **FAQPage schema** on your most-visited service/product/docs pages
5. **SoftwareApplication or Product schema** on your pricing/features pages
6. **BreadcrumbList schema** on all pages beyond 1 level deep

The first two take an evening. Steps 3-5 take a week of systematic page-by-page work if you have 20-50 pages. Step 6 is usually handled by a few lines in your CMS or static site generator.

After implementation, run a full AI visibility audit to see where your score lands and what else is flagged. The schema is one layer. Crawler access, content depth, heading structure, and page performance compose the rest of the picture.

Full audit at [aivis.biz/analyze](https://aivis.biz/analyze). [Observer](https://aivis.biz/pricing) tier is free with 3 audits. Schema implementation questions welcome in the comments.

I Built AiVIS Because I Kept Seeing Websites Get Misread by AI

AiVIS Cite Ledger — Mon, 06 Apr 2026 19:18:35 +0000

Hey everyone. I’m Ryan and I’m building AiVIS.

I started working on it after noticing that a lot of websites still look fine on the surface but get weak results when AI systems try to interpret them. They may rank. They may load fast. They may even look polished. But they still get skipped, misread or left out of answers.

That problem felt bigger than SEO alone.

So I started building around AI visibility, citation readiness, structured data, and machine readable trust. The goal with AiVIS is simple: show what answer engines can actually read and trust from a site then surface fixes that are backed by evidence instead of guesses.

I’ll be sharing more here as I build and learn. Glad to be here.