React Development Expertise

Key Principles

• Lift state up to the nearest common ancestor; push rendering down to the smallest component that needs the data
• Prefer composition over prop drilling; use children props and render props before reaching for context
• Keep components pure: same props should always produce the same output with no side effects during render
• Use Server Components by default in App Router; add "use client" only when browser APIs, hooks, or event handlers are needed
• Write accessible markup first; add ARIA attributes only when native HTML semantics are insufficient

Techniques

• Use

  useState

  for local UI state,

  useReducer

  for complex state transitions with multiple sub-values
• Apply

  useEffect

  for synchronizing with external systems (API calls, subscriptions, DOM measurements); always return a cleanup function
• Memoize expensive computations with

  useMemo

  and stable callback references with

  useCallback

  , but only when profiling shows a re-render problem
• Create custom hooks to extract reusable stateful logic:

  function useDebounce<T>(value: T, delay: number): T

• Use

  React.lazy()

  with

  <Suspense fallback={...}>

  for code-splitting routes and heavy components
• Forward refs with

  forwardRef

  and expose imperative methods sparingly with

  useImperativeHandle

Common Patterns

• Controlled Components: Manage form input values in state with

  value={state}

  and

  onChange={setter}

  for predictable data flow and validation
• Compound Components: Use React context within a component group (e.g.,

  <Tabs>

  ,

  <TabList>

  ,

  <TabPanel>

  ) to share implicit state without prop threading
• Optimistic Updates: Update local state immediately on user action, send the mutation to the server, and roll back if the server responds with an error
• Key-Based Reset: Assign a changing

  key

  prop to force React to unmount and remount a component, effectively resetting its internal state

Pitfalls to Avoid

• Do not call hooks conditionally or inside loops; hooks must be called in the same order on every render to maintain React's internal state mapping
• Do not create new object or array literals in render that are passed as props; this defeats

  React.memo

  because references change every render
• Do not use

  useEffect

  for derived state; compute derived values during render or use

  useMemo

  instead of syncing state in an effect
• Do not suppress ESLint exhaustive-deps warnings; missing dependencies cause stale closures that lead to subtle bugs