Rendering Patterns

Rendering strategy affects both correctness and performance in production React applications.

Conditional rendering

{isLoading ? <Spinner /> : <Dashboard />}

Lists and keys

{items.map(item => (
  <Row key={item.id} item={item} />
))}

Fragments and composition

Use fragments to avoid unnecessary wrapper markup while keeping JSX valid and readable.

Common pitfalls

  • Using index as key in mutable collections.
  • Running expensive computation directly in render path.

Professional tips

  1. Use stable domain IDs for keys.
  2. Keep render functions pure and side-effect free.
  3. Introduce memoization only after profiling evidence.

Practice

Implement a filterable task table with conditional empty/error/loading states and stable-key list rendering.