Page 15 - React

Combining Symfony with Inertia.js means writing controllers largely the same classic, Twig-like way, except that at the end a React component name with props is returned instead of HTML, making the entire frontend feel like a single page application, without a separate REST or GraphQL API ever coming into existence.

An event handler without a correct type almost automatically tempts you into any or repeated type casts the moment you access event.target.value. React event handler types fix this problem at the root: SyntheticEvent, ChangeEvent, and the matching handler types like MouseEventHandler know exactly which element triggered an event and which properties are available on it. This article shows how to apply React event handler types systematically, without any.

A select component for products, a second one for users, a third for categories, each almost identical, only differing in the data type: this exact pattern is what generic React components solve. Instead of duplicating a component for every data type, the type itself becomes a parameter, and the compiler checks on every use whether data, callback, and rendering fit together. This article shows how generic React components are built in practice, including JSX syntax, constraints, and forwardRef.

Without mocking, an unfinished backend endpoint blocks the entire frontend development effort. GraphQL mocking at the schema level makes frontend teams independent, enables testing of error scenarios, and significantly speeds up the development cycle.

The choice between Framer Motion and CSS Transitions in React has more to do with the animation type than with personal preference. Hover effects and simple state transitions belong in CSS. Orchestrated sequences, exit animations and shared element transitions are barely achievable without Framer Motion. This tutorial explains when which solution is the right one.

PWA Studio ships a ready-made Peregrine architecture with prebuilt components, while a custom React frontend gives full control over design, bundle size and dependencies. The decision depends less on trends than on team size, timeline and how individual the required shop experience needs to be.

React Fiber is not just an internal implementation detail, it is the foundation of why React 18, with Concurrent Mode, useTransition and Suspense, renders applications in a fundamentally different way than every version before it. Anyone who wants to understand why some updates are more urgent than others, and how React decides what appears on screen next, needs to know Fiber and its priority system.

Loading spinner, error message, data: this triangle of state gets typed out almost identically in every component that loads data from an API. A custom hook bundles that pattern in one place before it silently spreads to every component that needs it, and at the same time shows exactly where a hand-rolled solution ends and a library like TanStack Query begins.

Once several useState calls belong together and influence each other, the code quickly turns messy. useReducer bundles related state transitions into a single, testable function.

Create React App is officially deprecated and no longer maintained. Vite has taken over as the standard for React tooling: natural ESM in the dev server, sub-100ms hot module replacement, and a configuration that never requires ejecting. This article explains why the switch is worth it and how it goes smoothly.