typescript 67 lines · 2 tabs

React component composition over inheritance

Maya Patel Jan 2026

2 tabs

import { ReactNode } from 'react'

interface CardProps {
  children: ReactNode
  className?: string
}

export function Card({ children, className = '' }: CardProps) {
  return (
    <div className={`bg-white rounded-lg shadow ${className}`}>
      {children}
    </div>
  )
}

interface CardHeaderProps {
  children: ReactNode
  actions?: ReactNode
}

export function CardHeader({ children, actions }: CardHeaderProps) {
  return (
    <div className="flex items-center justify-between px-6 py-4 border-b">
      <div>{children}</div>
      {actions && <div className="flex gap-2">{actions}</div>}
    </div>
  )
}

export function CardBody({ children }: { children: ReactNode }) {
  return <div className="px-6 py-4">{children}</div>
}

export function CardFooter({ children }: { children: ReactNode }) {
  return <div className="px-6 py-4 border-t bg-gray-50">{children}</div>
}

Card.Header = CardHeader
Card.Body = CardBody
Card.Footer = CardFooter

function PostCard({ post }: { post: Post }) {
  return (
    <Card>
      <Card.Header
        actions={
          <>
            <button>Edit</button>
            <button>Delete</button>
          </>
        }
      >
        <h2>{post.title}</h2>
      </Card.Header>

      <Card.Body>
        <p>{post.excerpt}</p>
      </Card.Body>

      <Card.Footer>
        <div className="flex gap-4">
          <span>{post.likes_count} likes</span>
          <span>{post.comments_count} comments</span>
        </div>
      </Card.Footer>
    </Card>
  )
}

2 files · typescript Explain with highlit

React favors composition over inheritance for code reuse. Instead of extending component classes, I compose smaller components into larger ones. Higher-order components (HOCs) wrap components to add behavior, while render props pass rendering logic as functions. The children prop enables slot-based composition where parent components control layout but children provide content. Custom hooks extract stateful logic without component wrappers. I use compound components for flexible APIs that share state via context. This compositional approach creates more flexible, testable code than inheritance hierarchies. It's the React way of achieving polymorphism and code reuse.

Related snips

ruby

class Post < ApplicationRecord
  belongs_to :author, class_name: 'User'
  has_many :comments, dependent: :destroy

  scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
  scope :draft, -> { where(published_at: nil) }

ActiveRecord scopes for reusable query logic

rails activerecord patterns

by Alex Kumar 1 tab

typescript

import axios, { AxiosError } from 'axios'
import { v4 as uuidv4 } from 'uuid'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api/v1',
  timeout: 15000,

Axios API client with interceptors

react axios api

by Maya Patel 1 tab

typescript

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FilterState {
  search: string
  category: string | null

Zustand for lightweight state management

react zustand state-management

by Maya Patel 2 tabs

typescript

import React from "react";

type FallbackProps = {
  error: Error;
  reset: () => void;
};

React Error Boundary + error reporting hook

react frontend error-boundary

by codesnips 3 tabs

javascript

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
});

/** @type {import('next').NextConfig} */

Next.js bundle analyzer for targeted performance work

nextjs performance tooling

by codesnips 4 tabs

typescript

import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/contexts/AuthContext'

interface ProtectedRouteProps {
  children: React.ReactNode
}

React Router with protected routes

react react-router routing

by Maya Patel 2 tabs

Share this code

Here's the card — post it anywhere.

React component composition over inheritance — share card

Link copied