performance-security

XSS prevention in React requires validating all untrusted data, sanitizing HTML with libraries like DOMPurify, and implementing Content Security Policy headers. React's default escaping protects against most attacks, but user-generated content and third-party scripts need explicit hardening.

Implement code-splitting with route-based lazy loading, optimize images with WebP and lazy loading, and leverage the React Compiler for speed. Visualize your bundle using rollup-plugin-visualizer to identify and eliminate large dependencies.

Use semantic HTML, add ARIA attributes where needed, ensure keyboard navigation on all interactive elements, and maintain sufficient color contrast. Test with assistive technologies and manual review to confirm full compliance.

Yes. Audit for common vulnerabilities like XSS and unvalidated inputs, analyze bundle size with visualization tools, check for lazy-loaded routes and code-splitting opportunities, and validate keyboard accessibility across all interactive components.

The React Compiler works with compiler-friendly code and pure components. Combine it with route-based lazy loading and serializable props to maximize performance gains alongside code-splitting strategies.

Unoptimized images bloat bundle size and slow page load. WebP format and lazy loading defer off-screen images, reducing initial payload and improving Core Web Vitals—critical for user experience and SEO.