Question 1

How do I build a reusable React component with TypeScript?

Accepted Answer

Define a complete props interface, expose only the minimal required props with defaults, and use generics instead of any for components like List<T>. Follow the controlled pattern with value plus onChange callbacks when external control is needed.

Question 2

How to manage state in React and Vue components?

Accepted Answer

Keep state local first and only lift it when truly shared across components. Derive values with useMemo in React or computed in Vue instead of storing them, and clean up listeners, timers, and subscriptions in effect cleanup functions.

Question 3

When should I use React.memo, useCallback, and useMemo?

Accepted Answer

Apply them only where there is measurable rendering benefit, with correct dependency arrays, since wrong dependencies introduce bugs rather than optimizations. Split large contexts to avoid re-rendering the whole tree on a single change.

Question 4

Does this approach work for both React and Vue projects?

Accepted Answer

Yes, it covers React 18/19 and Vue 3 Composition API with framework-specific guidance. React sections cover memo and context splitting, while Vue sections cover computed, shallowRef, v-memo, and provide/inject.

Question 5

How do I make components accessible for keyboard users?

Accepted Answer

Use semantic elements like real button and a tags instead of divs with click handlers, ensure visible focus and logical tab order, and implement focus traps with Escape-to-close for modals, drawers, and dropdowns. Prefer semantics over ARIA.

component-development

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about component-development

Related Skills

Ant Design X 组件开发规范指南

audit

react-best-practices

better-design-shadcn-themes