React

Critical security vulnerabilities like React2Shell (CVE-2025-55182, CVSS 10.0) in Next.js RSC serialization revealed that full-stack JavaScript and TypeScript lack secure serialization models. These runtime CVEs forced developers to reassess security assumptions in TypeScript/React stacks.

XSS attacks can occur in Next.js through improper use of dangerouslySetInnerHTML, unvalidated user input in dynamic content, third-party scripts, and server-side rendering of malicious content.

React's client-side rendering model introduces XSS vulnerabilities from improperly sanitized JSX content, bypassing PHP's native sanitization. Additionally, heavy reliance on npm packages increases exposure to supply-chain threats and malicious code in third-party dependencies.

Libraries that assume React 17 or 18 create compatibility issues during React 19 migration. Dependencies often present larger migration barriers than React itself, requiring teams to audit the entire dependency tree before upgrading.

Exposing dynamic request/response objects in the App Router affects the entire route and limits the framework's ability to implement caching, streaming, and future Partial Prerendering optimizations.

Next.js 16 introduces hydration errors where client-side reconciliation doesn't match server-rendered HTML, causing flicker, broken interactivity, and console warnings. This issue is particularly prevalent with the new Server Component paradigm.

Fetching data in useEffect causes a waterfall effect where component renders trigger data fetches, and nested child components wait for parents before making their own requests. This creates 3+ steps before data even starts moving, resulting in users seeing loading spinners for 3-5 seconds instead of immediate content.

Large data passed to client components (e.g., 7 MB from getStaticProps) must be transferred and parsed by the browser even if unused by the UI, slowing down FCP and LCP.

v0 strictly outputs React components and Next.js-compatible code only, forcing developers using Angular, Vue, Svelte, or other frameworks to perform extensive code conversion. The tool also mandates Tailwind CSS and doesn't generate TypeScript by default.

useEffect is used by 98% of developers but has the lowest satisfaction ratio of any React hook. The top complaint (37%) centers on finicky reactivity, stale closures, and effect cleanup issues. Dependency array problems account for 21% of complaints, a 23.5% year-over-year increase.

React applications suffer from unnecessary re-renders, large bundle sizes, slow initial page loads, memory leaks, and poor mobile performance. These issues are partly inherent to client-side SPAs lacking server-side rendering or static site generation.

Automated codemods recommended for React 19 migrations cause regressions or incomplete changes in large codebases. Migration tools are useful but unreliable, requiring teams to treat them as helpers rather than one-click solutions and manually verify changes.

CSS-in-JS libraries like Styled Components run JavaScript in the browser to hash class names and inject styles dynamically, causing style recalculations on every injection. This significantly degrades LCP, FCP, and INP metrics.

React Server Components (RSC) create confusion about client-server boundaries, increase development complexity, and introduce latency. Simple applications feel overengineered due to RSC requirements, creating a steep learning curve and performance concerns with cold starts on serverless platforms.

Developers commonly import entire libraries when only needing single functions, pulling in 70+ kilobytes of unused code (e.g., lodash). Combined with full icon libraries, moment.js for dates, and analytics packages with unwanted dependencies, this significantly increases bundle size and degrades performance.

Learning Next.js requires mastering not just React, but also its routing model, rendering modes, proprietary caching behavior, deployment quirks, and middleware runtime. This multi-layered complexity creates a steep onboarding barrier for newcomers.

Without using next/dynamic, components that aren't needed on initial page load (like modals) get shipped in the main bundle, increasing bundle size and harming LCP, FCP, and INP.

Using regular <img> tags instead of next/image loses built-in optimizations like lazy loading and responsive sizing. Without proper sizes attribute, browsers may download large desktop images on mobile devices, hurting LCP.

React projects lack standardized patterns for component organization and code structure. Unlike Vue or other frameworks, React projects vary significantly in structure, leading to unclear project layouts, poor code reusability, scalability challenges, and accumulated technical debt.

React codebases suffer from excessive complexity (20% of pain points) and boilerplate (15%). The accumulation of hooks, rules, patterns, and workarounds creates codebases that are hard to maintain and riddled with hacks, making even simple code reviews feel like navigating bureaucratic mazes.

Complex state logic across components, excessive prop drilling through multiple component levels, state synchronization issues, and race conditions in async operations create significant cognitive overhead. Developers struggle with global state complexity and synchronization across the application.

React developers face challenges with complex component testing, time-consuming integration tests, brittle test maintenance, mock complexity, and gaps in test coverage. Testing infrastructure is difficult to set up and maintain effectively.

Knowing when to use useMemo, useCallback, and React.memo adds significant mental overhead for developers. This complexity stems from React's component-based reactivity model requiring the entire component function to re-run on every update, forcing developers to manually optimize with memoization.

Developers face overwhelming fragmentation across state management (Redux, Zustand, Context), routing (React Router, etc.), server-side rendering (Next.js, alternatives), and other core concerns. 11% of developers specifically cited ecosystem complexity as a pain point, describing it as navigating competing solutions and rapidly evolving metaframeworks.

React introduces paradigms that fundamentally differ from PHP or jQuery workflows. Developers must understand state management, hydration (syncing server-rendered markup with client-side React), and new mental models, creating significant learning friction for traditional WordPress developers.

Developers encounter difficulties with TypeScript configuration and integration in React projects, contributing to poor overall development experience and inconsistent typing patterns across codebases.

Wrapping updates in act() for tests remains confusing and error-prone, especially with asynchronous operations. This adds friction to the testing workflow and requires additional cognitive load.

React lacks built-in support for complex form validation logic. Native HTML validation attributes cannot cover substantial use cases, forcing developers to reinvent form validation solutions repeatedly. Framework alternatives like Svelte with SuperForms provide more integrated solutions.

React violates traditional web development standards by requiring JSX instead of HTML, pushing CSS-in-JS and inline styles instead of cascading CSS, using custom routing instead of native window.location and history API, and introducing 'use server' directives instead of standard fetch/JSON/HTTP patterns. These deviations create debugging nightmares and bad practices.

The React community exhibits growing frustration and disagreement about where React is headed, how it's developed, and recommended approaches for using React. Tensions exist between React team recommendations (full-stack, server components) and community concerns about complexity, accessibility, and backwards compatibility.

React's requirement to factor conditionals into separate functional components or use ugly ternary operators creates poor ergonomics. The lack of first-class IDE support exacerbates this issue, making conditional logic difficult to write and maintain.

The cookies() API allows type-checked usage like cookies().set() anywhere, but fails at runtime in certain contexts. This unexpected behavior differs from traditional request object access and creates developer footguns.

React community channels like Discord suffer from poorly formatted unclear questions and lack of expert engagement. Even clear, answerable questions receive poor responses compared to other language communities. Documentation is often incomplete or depressing for non-Node.js backend use cases.

React 19 introduced numerous new APIs with low familiarity among developers: Profiler (57% unfamiliar), ViewTransition (41%), Activity (41%), cache (41%), useEffectEvent (40%), useDeferredValue (39%). This creates knowledge gaps and increases the learning curve for developers trying to stay current.

While React adoption in WordPress grows, documentation specifically addressing WordPress contexts remains insufficient. Developers frequently rely on generic React resources that overlook WordPress-specific practices, library usage, and Block Editor design patterns.

Developers continue to get tripped up by effects running twice in development mode due to StrictMode. This behavior confuses developers and stems from React's fundamental architecture requiring entire component functions to re-run on updates.

The forwardRef pattern has been a longstanding pain point for React developers for years. While React 19 deprecates forwardRef in favor of ref as a prop, legacy codebases and older patterns still create friction.