5
integrations
6
documented sections
Overview
React is the library that powers most of the interfaces you use every day, maintained by Meta and battle-tested at enormous scale. It introduced the component model that defines modern frontend work: interfaces composed from small, reusable pieces that each manage their own logic. You describe what the screen should look like for a given state, and React works out the minimal updates needed to get there.
Version 19, currently at 19.2, adds first-class Server Components, Actions for handling data changes, and the use hook for reading resources such as promises during render.
Component Model
A component is a self-contained piece of interface, like a button or a pricing card, that can be reused anywhere. Technically, it is a function that accepts props and returns a description of the screen. Parents pass data down to children, and children report back through callbacks, so the path of every value through the application stays traceable. This one-directional flow is why React interfaces remain debuggable at scale, and it is the boundary where we organize both code and design tokens.
interface ButtonProps {
label: string
onClick: () => void
}
export function Button({ label, onClick }: ButtonProps) {
return (
<button type="button" onClick={onClick}>
{label}
</button>
)
}Hooks and State
Hooks are how components remember things, like what a user typed or whether a menu is open. useState holds local state, useEffect synchronizes a component with outside systems, and useMemo and useCallback keep expensive work from repeating unnecessarily. Custom hooks bundle reusable behavior into named functions, so logic like scroll tracking or media queries is written once and shared. We keep all shared behavior in a dedicated hooks directory so it never gets duplicated across your project.
Server Components in React 19
Server Components run only on the server, which means their code never adds weight to what your visitors download. They read data directly, render the result, and hand finished HTML to the browser. Client Components, marked with "use client", run in the browser and handle the interactive parts: clicks, typing, local state. React 19 makes this boundary official and adds Actions, which let a button or form trigger server-side work without hand-written request wiring. Less code shipped, fewer things to break.
How Devyst Uses React
We build all interface code as typed React components with explicit props and named exports, so every piece is self-documenting. Server Components are the default wherever interactivity is not needed, and the "use client" boundary is pushed as deep into the tree as possible to keep your client bundle small. Shared primitives live in a ui directory, and animation behavior stays in reusable hooks so motion logic never tangles with page content.
Rendering Performance
A laggy interface feels broken even when nothing is wrong, so rendering performance gets deliberate attention. React re-renders a component when its data changes, and that work cascades to children unless it is bounded. Memoization through React.memo, useMemo, and useCallback prevents wasted recomputation, and stable keys help React reuse DOM nodes across list updates. The React Compiler that arrived alongside version 19 now automates most of this at build time, so the optimizations happen even when no one remembers to write them.