Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
React for Angular Developers: Library or Framework, Mental Model Differences and the Ecosystem Map
React is a UI library, not a framework: it gives you components, state and rendering, while the team picks routing, data fetching, forms and global state from the ecosystem. We write Bookstore's book card side by side in Angular and React, show with real output that one click makes React call the component function again yet change only two text nodes in the DOM, and map Angular concepts to their React counterparts in a table.
Your First React Project: Vite + TypeScript, Project Structure, StrictMode and React DevTools
We build a project skeleton for the series with Vite's react-ts template, feature folders, an @/ alias from a single source via Vite 8's resolve.tsconfigPaths, Oxlint's hook rules and a dev proxy that forwards /api requests to the Bookstore API. With real output we show that StrictMode renders twice and runs effects setup-cleanup-setup in development while the production build runs everything once, and that without the proxy the browser refuses to read the response because of CORS.
JSX and Components: JavaScript Instead of Templates, Props, children and Rendering Lists
JSX is not a template language but JavaScript compiled to _jsx() calls at build time; conditions use &&, the ternary and early returns, lists use map with a key taken from the data's own identity. In Bookstore's BookCard, BookList and Layout components we type props with TypeScript, build the counterpart of ng-content with children, and show with real runs that key={index} moves a note to the wrong book, that 0 && prints 0 and that dangerouslySetInnerHTML runs onerror code.
Events and State in React: useState, Immutable Updates and When Re-renders Happen
In React state is a snapshot per render: setState does not change the variable, it asks for the next render; an update computed from the previous value needs an updater function, and objects and arrays always need a new reference. We add a quantity picker and a cart to the Bookstore catalog and show with render logs that three setAmount(amount + 1) calls give 2, that a mutated cart reaches the screen late and that three updates in one event become one render.
Where Should State Live? Lifting State Up, Controlled Inputs, Derived State and useReducer
State should live in the closest common ancestor of the components that need it; computable values stay out of state, you store an identity instead of a copy, and state that must reset on a prop change gets a key. We lift Bookstore's cart into App, turn it into a type-safe reducer with useReducer and a discriminated union, and show with real output that a separately kept total goes wrong on remove and that a details panel without a key carries a note to another book.
Using useEffect Correctly: Synchronization, Cleanup, Dependency Arrays and "You Might Not Need an Effect"
useEffect is not a lifecycle hook but a tool for synchronizing a component with an external system: every setup has a cleanup, and the dependency array lists the reactive values the effect reads. We connect the Bookstore catalog to API search and show with real network records that debounce and AbortController send one request even under StrictMode, that a late response overwrites the list without cleanup, and that useEffectEvent avoids a needless request.
useRef, Context and Custom Hooks: DOM Access, Context Instead of DI and the Rules of Hooks
useRef is a box that does not trigger renders (a DOM node or a timer id), while Context carries a value deep into the tree without props and re-renders every component that reads it when it changes. We move the Bookstore cart, theme and user into Context, measure a version where a theme change renders 28 components instead of 2, and show an inline ref callback stealing focus, a conditional hook crashing the app and the search split into custom hooks.
Data Fetching in React: From fetch + Effects to TanStack Query, Suspense and use()
Fetching in an effect gives you no cache, deduplication, retries or invalidation; TanStack Query gathers them around the query key. We move the Bookstore catalog and the server-side cart to TanStack Query and measure a revisited search coming from the cache, an optimistic update rolled back on a 500, a 409 Problem Details shown to the user, Suspense's 300 ms reveal window, and a promise created during render sending 3,739 requests through use() in three seconds.
Routing with React Router 8: Routes, Nested Layouts, URL Params, Loaders/Actions and Lazy Routes
In React Router 8's data mode, routes are passed to createBrowserRouter as objects; layout routes and Outlet give nested pages, loaders fetch data before entering a route, middleware acts as a guard, actions handle forms and lazy enables code splitting. We split Bookstore into URLs, move the search into the query string, and show state leaking to the next book without a key, a lazy chunk downloading before a middleware redirect, and why a static server needs an SPA fallback.
Forms in React: Controlled Inputs, Form Actions, useActionState, useFormStatus and react-hook-form + zod
React 19's form actions (useActionState, useFormStatus, useOptimistic) are enough for small forms; for forms with line items and nested data, react-hook-form with a zod schema means less code and fewer renders. On the Bookstore order form we show the controlled version rendering on every key, an action resetting the form after a validation error, useOptimistic reverting by itself on failure, and Problem Details errors mapped to fields with focus moved to them.
Global State in React: The Limits of Context, Zustand and When to Use Redux Toolkit
Most "global state" is really server, URL or form state; for the small client state that is truly global, Zustand's store with selectors fixes Context's render-every-reader problem, while Redux Toolkit comes in when you need an action log and rules for a large team. In Bookstore we move the recently viewed books and the cart id into a persisted store, and show reading without selectors causing 13 renders instead of 1 and a selector returning a new object looping forever in Zustand 5.
Performance in React: Understanding Re-renders, memo, useMemo, useCallback, the React Compiler and the Profiler
Reducing re-renders only helps when there is a measured cost, and often the real cost is the browser's DOM work rather than React. On Bookstore's 5,000-row stock page we measure memo and useCallback cutting row renders from 5,000 to 1, an inline callback undoing that, the React Compiler halving render time while the click stays at 400 ms, and virtualization bringing it down to 40 ms; plus the effect of useDeferredValue and Activity.