Component

abstract class Component<P = {}, S = {}> {
  constructor(props?: P, context?: any);
  
  // Instance properties
  props: RenderableProps<P>;
  state: Readonly<S>;
  context: any;
  
  // Core methods
  setState<K extends keyof S>(
    state: ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | Partial<S> | null) | (Pick<S, K> | Partial<S> | null),
    callback?: () => void
  ): void;
  
  forceUpdate(callback?: () => void): void;
  
  abstract render(
    props?: RenderableProps<P>,
    state?: Readonly<S>,
    context?: any
  ): ComponentChildren;
  
  // Lifecycle methods
  componentWillMount?(): void;
  componentDidMount?(): void;
  componentWillUnmount?(): void;
  componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
  shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
  componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
  getSnapshotBeforeUpdate?(oldProps: Readonly<P>, oldState: Readonly<S>): any;
  componentDidUpdate?(previousProps: Readonly<P>, previousState: Readonly<S>, snapshot: any): void;
  componentDidCatch?(error: any, errorInfo: ErrorInfo): void;
  getChildContext?(): object;
  
  // Static methods
  static displayName?: string;
  static contextType?: Context<any>;
  static getDerivedStateFromProps?(props: Readonly<object>, state: Readonly<object>): object | null;
  static getDerivedStateFromError?(error: any): object | null;
}

constructor(props?: P, context?: any)

props: RenderableProps<P>

state: Readonly<S>

context: any

setState<K extends keyof S>(
  state: ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | Partial<S> | null) | (Pick<S, K> | Partial<S> | null),
  callback?: () => void
): void

forceUpdate(callback?: () => void): void

abstract render(
  props?: RenderableProps<P>,
  state?: Readonly<S>,
  context?: any
): ComponentChildren

import { Component } from 'preact';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

import { Component } from 'preact';

interface Props {
  initialCount: number;
  onCountChange?: (count: number) => void;
}

interface State {
  count: number;
}

class Counter extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { count: props.initialCount };
  }
  
  increment = () => {
    this.setState(
      (prevState) => ({ count: prevState.count + 1 }),
      () => {
        this.props.onCountChange?.(this.state.count);
      }
    );
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

import { Component } from 'preact';

class DataFetcher extends Component {
  state = { data: null, loading: true, error: null };
  
  componentDidMount() {
    // Fetch data after mount
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data, loading: false }))
      .catch(error => this.setState({ error, loading: false }));
  }
  
  componentWillUnmount() {
    // Cleanup subscriptions, timers, etc.
    this.cleanup();
  }
  
  componentDidUpdate(prevProps, prevState) {
    // Respond to prop or state changes
    if (prevProps.id !== this.props.id) {
      this.fetchData(this.props.id);
    }
  }
  
  render() {
    const { data, loading, error } = this.state;
    
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;
    return <div>{JSON.stringify(data)}</div>;
  }
}

import { Component } from 'preact';

class OptimizedList extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Only re-render if items array reference changed
    return this.props.items !== nextProps.items;
  }
  
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

import { Component } from 'preact';

class ErrorBoundary extends Component {
  state = { hasError: false, error: null };
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    // Log error to service
    console.error('Error caught:', error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong</h1>
          <details>
            <summary>Error details</summary>
            <pre>{this.state.error.toString()}</pre>
          </details>
        </div>
      );
    }
    
    return this.props.children;
  }
}

import { Component, createContext } from 'preact';

const ThemeContext = createContext('light');

class ThemedButton extends Component {
  static contextType = ThemeContext;
  
  render() {
    const theme = this.context;
    return (
      <button className={`button-${theme}`}>
        {this.props.children}
      </button>
    );
  }
}

export function BaseComponent(props, context) {
  this.props = props;
  this.context = context;
  this._bits = 0;
}

BaseComponent.prototype.setState = function (update, callback) {
  // Implementation...
};

BaseComponent.prototype.forceUpdate = function (callback) {
  // Implementation...
};

BaseComponent.prototype.render = Fragment;