Synthetic Industry

Platform · updated 2026-10-11

React app problems: blank screens, mismatched text, forms and layout, and the job that fits each

For a product owner with a React front end that misbehaves in a specific way, a map from symptom to cause and to a bounded, checkable repair.

What the user sees points to the cause

A white page and a spinner that never stops are different failures. A white page usually means an error was thrown while rendering and nothing caught it: React removes the UI by default. A permanent spinner usually means a request failed and the code that clears the loading flag never ran. A list that looks broken for a new user is an empty case nobody designed. A warning about mismatched text on a server-rendered app is a hydration fault. A page that scrolls sideways on a phone is a layout fault. Each has its own first check, and React's documentation is clear that error boundaries cover rendering errors only, not failed clicks or asynchronous work.

  • White page: check for a thrown error during render.
  • Endless spinner: check the failure path of the request.
  • Empty box: check the zero-result case.
  • Sideways scroll: find the element wider than the screen.

Guides by symptom

The error boundary guide explains what a boundary catches and the seven cases a screen should handle, with a worked states table. The hydration guide lists the documented causes of mismatched text. The form guides cover rejecting real names and addresses and labelling fields and errors for assistive technology. The keyboard guide gives a five-minute test of one flow. The sideways-scroll guide covers flexible items that will not shrink and viewport pitfalls. None of them needs access to your code to be useful.

  • Use the worked example to write your own states table.
  • Use the keyboard test on your most important flow today.

Pick the smallest job that fits

One screen that goes blank or sticks on failing data is the screen-states job (£245, untested). Up to five named layout defects on one page are the layout job (£195). One page or flow against an agreed accessibility checklist is the accessibility job (from £595). A form that is flooded with junk or rejecting real people is the form job (£245). Any other reproducible bug is a bug repair with a regression test (from £295). A set of flows that all need to be dependable is a project (from £3,500, quoted). All prices are untested and paid only after the agreed checks pass and you sign off. Send the symptom, the React version and what the user sees in your first enquiry, not source code or customer data.

  • No work starts, and nothing is charged, until scope and terms are agreed in writing.
  • We are a new service with no client delivery record to show.

Sources and limits

  • React: Component (error boundaries) Checked 2026-10-11.
    • Error boundaries catch rendering errors in their children but not errors in event handlers, asynchronous code, server-side rendering or the boundary itself.
  • React: hydrateRoot Checked 2026-10-11.
    • Hydration expects the browser's first render to match the server-rendered content; mismatches should be treated as bugs.