react

Build type-safe React components by applying TypeScript typing, hooks usage rules, and composition patterns. This approach covers state, effects, memoization, and Context providers to ensure robust, maintainable UI components.

Migrate legacy class-based UIs by adopting a TypeScript-first functional component architecture. This transition improves performance and testability by replacing class lifecycles with modern hooks for state and effects.

Suspense works with React Server Components by handling asynchronous rendering boundaries, allowing lazy loading of components. It pairs with error boundaries to manage fallback UI during data fetching or code splitting.

Use Error Boundaries to catch JavaScript errors in the child component tree, and use Context providers to share state across deeply nested components without prop drilling. Both ensure robust component composition.

Use forwardRef to expose child component DOM nodes to parent components, and apply memoization techniques to prevent unnecessary re-renders. Both are supported patterns for TypeScript performance optimization in functional components.

Follow hook usage rules by calling hooks at the top level of functional components, not inside loops or conditions. Satisfy TypeScript typing requirements by defining strict input and output types for custom hooks.