Accessible, Tested, Fast React

React does not change web fundamentals. Semantic HTML, keyboard behavior, focus management, forms, headings, and meaningful loading feedback remain the foundation.

Build and test the user contract

01render(<CourseCard course={course} onOpen={onOpen} />);
02await user.click(screen.getByRole("button", { name: /open html/i }));
03expect(onOpen).toHaveBeenCalledWith("html");

Query elements by roles, labels, and visible names. Test interaction outcomes, errors, focus movement, and async states rather than component internals.

Performance with evidence

Keep state local, avoid effects that create render loops, virtualize genuinely large lists, and split code at meaningful routes. Use the React profiler before adding memoization.

01const filtered = useMemo(() => expensiveFilter(courses, query), [courses, query]);

Memoization is a performance tool, not a correctness requirement. Dependencies must remain complete.

Production checklist

• Navigate with keyboard and screen reader.
• Test loading, empty, failure, and recovery states.
• Check hydration and console warnings.
• Measure bundle size, render work, and real loading metrics.
• Add an error boundary at useful recovery boundaries.

Keep this

Preserve the platform, test behavior from the user's perspective, profile before optimizing, and ship explicit failure recovery.