Page 11 - React

Expo has grown from a limited sandbox into a full toolchain for React Native that now supports even complex native modules. The bare workflow still matters when maximum native control is required. This article shows how Expo really works today and when switching to bare is actually necessary.

A React storefront built on Magento's GraphQL API fully decouples frontend and backend, making the shop faster, more flexible and easier to maintain. Teams that understand the schema, pick the right client and plan caching and error handling from day one save months of later rework.

jest-axe wires the rule engine of axe-core directly into Jest tests and checks rendered React components against recognized WCAG rules. In a CI pipeline, this stops obvious accessibility violations from silently reaching the main branch, but it does not replace manual review.

Feature flags in React apps decouple the question of when code gets deployed from the question of when a feature actually becomes visible. Instead of risky big bang releases, new functionality can be rolled out step by step, to specific user groups, or switched off instantly with a kill switch, all without a new build.

The window resize event was the first, but flawed, approach to size-dependent JavaScript. ResizeObserver watches individual DOM elements directly, regardless of whether the window changes, a sidebar panel opens, or a parent element grows dynamically.

Expensive state updates block the main thread and freeze inputs. useTransition marks updates as low priority so React can render them interruptibly, inputs stay responsive, and isPending signals the loading state without useState overhead.

React Hook Form advertises avoiding unnecessary re-renders by managing input fields uncontrolled through refs instead of state. That exact advantage disappears quickly, though, the moment watch() enters the picture, since the value this function returns triggers a re-render of the entire form component on every keystroke, while the dedicated useWatch() hook solves exactly this problem in a targeted way.

Manual memoization with useMemo and useCallback is error prone, hard to maintain and frequently used incorrectly. The React Compiler analyzes component code at build time and automatically inserts the right memoization wrappers, without developers having to manage dependency arrays or decide when something should be cached. How that works and what it means.

Environment variables in React builds are processed differently than in a backend: they get embedded permanently into the bundle as soon as they carry the right prefix. Anyone who does not understand this accidentally bakes secrets into publicly readable JavaScript code, or wonders why a changed variable has no effect after a deployment.

Anyone who first sees a console.log inside a useEffect suddenly appear twice in the development build almost always assumes it is a bug. In reality, the double execution under Strict Mode in React 18 and 19 is deliberately built in to expose exactly the effects that lack correct cleanup and would otherwise turn into hard-to-find bugs in production later.