Frameworks

React

The most widely adopted library for building interactive user interfaces. One component model spans web, mobile, and server rendering.

ANZProspaClearViewIAGEYQantasUnited NationsSwiss Government
Where it fits
01

The component model that won

React builds interfaces from small, testable components that can be reasoned about in isolation, a model every major front-end framework has since adopted in some form. That model has held stable since 2013 while everything around it changed, so a React codebase written years ago can still be extended today without a rebuild.

The library has moved through clear eras, class components, then hooks, now Server Components in React 19, and each is adopted by choice. Server Components render on the server by default and send the client only the JavaScript it needs; hooks-based single-page applications remain fully supported. The rendering model should follow the product rather than the release notes.

The ecosystem is the deepest in front-end engineering. Routing, data fetching, forms, testing and accessibility tooling are all mature, and TypeScript and Next.js are its usual companions in our work.

React is the wrong tool for a site that is mostly content with little interactivity: shipping a client framework to render documents costs performance for nothing, and a server-rendered stack such as Django or Laravel serves those sites better. Teams that want one prescribed way of building, with the framework deciding, are often better served by Angular.

React was used by 44.7% of respondents to the 2025 Stack Overflow Developer Survey.

Common in SaaS products, dashboards, portals
Key tools Next.js, TypeScript, TanStack Query, Zustand
Rendering Client, server, and streaming
Typical pattern Design systems, SPAs, full-stack with Next.js
  • SaaS Products
  • Dashboards
  • Portals
  • Design Systems
02

Our React capabilities

Component architecture and design systems

A design system stands or falls on its taxonomy, so we start there: primitives that encode the design tokens, composites that encode behaviour, page containers that own data. Storybook documents each layer as it is built, giving design and engineering one place where the real components live. Accessibility is a property of the primitives: WCAG 2.2 AA is verified at that level, so every composite built from them inherits it.

  • Storybook
  • Design tokens
  • WCAG 2.2 AA

Server Components and streaming

Server Components move data fetching to where the data lives, collapsing the loading choreography that single-page applications accumulate on the client. We draw the server/client boundary deliberately: interactive islands stay client components, everything above them renders on the server, and Suspense boundaries stream HTML so a page is readable before it is complete. Adoption can proceed one route at a time; nothing about the model demands a rewrite.

  • React 19
  • Suspense
  • Next.js App Router

State management at scale

Most state problems in a mature React application are cache problems, so the two are separated: TanStack Query owns server data, with staleness and refetching declared per query, and Zustand holds the client state that remains. Forms go through React Hook Form, which keeps keystroke re-renders local to the field. The aim is a state layer where every piece of data has one owner, which is what keeps a large front end debuggable.

  • TanStack Query
  • Zustand
  • React Hook Form
03

Why Adaca for React?

04

How We Staff It

A React brief usually names more than React: a design system to maintain, a data layer to integrate, sometimes a migration running underneath. We staff it with front-end engineers whose depth is component architecture and accessibility, most of whom also work in TypeScript end to end.

React is the largest single competency in our front-end pool, so most briefs are filled from engineers we already employ or already know. Specialised needs, design-system leadership, Core Web Vitals work, are matched on that specific history.

05

Common Questions

Is React or Angular the safer choice for a product we will run for ten years?

Both are credible over that horizon; the deciding factors are organisational. React leaves architecture to the team, which suits a product group that wants to own its choices and evolve them piece by piece. Angular decides routing, forms, dependency injection and structure for you, which suits organisations running many teams over one standard, and two Angular codebases resemble each other far more than two React codebases do.

React's risk is drift: with every layer chosen, discipline is needed to stop five ways of doing one thing. Angular's risk is coupling to the framework's own timetable of change. We build and maintain both, and the recommendation follows how your organisation makes decisions.

Our React application is still on class components. Rewrite or refactor?

Refactor, almost always. Class components still run on current React, so nothing forces a rewrite, and hooks conversion proceeds component by component inside normal feature work. We sequence by touch frequency: components that change weekly convert early, stable ones can wait indefinitely.

A rewrite only enters the conversation when routing, data flow and build tooling are being replaced at the same time, and even then it runs incrementally, new beside old, until the last old route retires.

How well do coding agents handle React work?

Very capably, with one React-specific failure mode. The public React corpus is the largest of any front-end technology, so agents produce components, tests and styling that mostly work first pass. The catch is that the corpus spans every era of the library at once, class components, hooks, Server Components, and an agent's default output can be idiomatic for the wrong one: deprecated lifecycle patterns in a hooks codebase, client-side fetching where a server component was wanted.

The counter is making the codebase declare its own idiom: lint rules that ban the legacy patterns, current exemplar components for the tooling to imitate, and review that treats era drift as a defect like any other.

What should we change in our React codebase before leaning on AI tooling?

Give the tooling boundaries and a signal. Typed props turn component contracts into machine-checkable facts, React Testing Library suites return behavioural feedback per component, and small colocated components mean a change fits inside the context an agent actually reads. The TypeScript page covers the compile-time half of this in more depth.

The codebases that resist AI assistance are the ones that resist new engineers: props drilled through many layers, state living in implicit context, five-hundred-line components. Fixing those pays for itself whatever the tooling.

What does a React team from Adaca look like?

For product work, one or two React engineers embedded in your existing team is the usual starting shape, widening to a full-stack TypeScript group when the brief covers the API layer as well. Design-system work adds an engineer with component-library and accessibility depth.

Engagements start at one engineer and run for three, six, nine or twelve months, fixed up front, with the team keeping your working day.

How is a React engagement priced?

As a monthly rate for the team, or as a fixed cost where the brief is a defined first outcome such as a design system or a front-end rebuild. We do not publish rate figures because the seniority mix moves them; the People pages describe both models. Shortlists usually arrive within 48 hours of a brief, so pricing is discussed against named engineers rather than a generic profile.