Core React Components

/**
 * Base component class providing React-compatible lifecycle and state management
 */
abstract class Component<P = {}, S = {}> {
  /** Component properties passed from parent */
  props: P;
  /** Component state for internal data management */
  state: S;
  /** Component context for dependency injection */
  context?: any;
  /** References to DOM elements and child components */
  refs?: Refs;
  
  /**
   * Component constructor
   * @param props - Initial properties
   * @param context - Optional context object
   */
  constructor(props: P, context?: any);
  
  /**
   * Render method that returns the component's virtual DOM
   * @param props - Current props (optional)
   * @param state - Current state (optional) 
   * @param context - Current context (optional)
   * @returns Virtual DOM representation
   */
  abstract render(props?: P, state?: S, context?: any): InfernoNode;
  
  /**
   * Called after component is mounted to the DOM
   */
  componentDidMount?(): void;
  
  /**
   * Called before component is unmounted from the DOM
   */
  componentWillUnmount?(): void;
  
  /**
   * Called after component updates
   * @param previousProps - Previous props
   * @param previousState - Previous state
   * @param snapshot - Value returned from getSnapshotBeforeUpdate
   */
  componentDidUpdate?(previousProps: P, previousState: S, snapshot: any): void;
  
  /**
   * Determines if component should re-render
   * @param nextProps - Next props
   * @param nextState - Next state
   * @param nextContext - Next context
   * @returns true if component should update
   */
  shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean;
  
  /**
   * Called before DOM update to capture information
   * @param previousProps - Previous props
   * @param previousState - Previous state
   * @returns Snapshot value passed to componentDidUpdate
   */
  getSnapshotBeforeUpdate?(previousProps: P, previousState: S): any;
  
  /**
   * Error boundary handler for catching child component errors
   * @param error - Error that was thrown
   * @param errorInfo - Error details
   */
  componentDidCatch?(error: Error, errorInfo: any): void;
  
  /**
   * Updates component state and triggers re-render
   * @param partial - Partial state update or update function
   * @param callback - Optional callback after state update
   */
  setState(
    partial: Partial<S> | ((prevState: S, props: P) => Partial<S>), 
    callback?: () => void
  ): void;
  
  /**
   * Forces component to re-render regardless of state changes
   * @param callback - Optional callback after re-render
   */
  forceUpdate(callback?: () => void): void;
}

import { Component } from "inferno-compat";

interface Props {
  name: string;
  onUpdate?: (value: string) => void;
}

interface State {
  count: number;
  message: string;
}

class Counter extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: 0,
      message: `Hello ${props.name}`
    };
  }
  
  componentDidMount() {
    console.log('Counter component mounted');
  }
  
  componentDidUpdate(prevProps: Props, prevState: State) {
    if (prevState.count !== this.state.count) {
      this.props.onUpdate?.(`Count is now ${this.state.count}`);
    }
  }
  
  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

/**
 * Component that automatically implements shallow comparison for shouldComponentUpdate
 * Prevents unnecessary re-renders when props and state haven't changed
 */
abstract class PureComponent<P = {}, S = {}> extends Component<P, S> {
  /**
   * Performs shallow comparison of props and state
   * @param props - Next props
   * @param state - Next state
   * @returns true if shallow comparison shows differences
   */
  shouldComponentUpdate(props: P, state: S): boolean;
}

import { PureComponent } from "inferno-compat";

interface UserProps {
  user: {
    id: number;
    name: string;
    email: string;
  };
  onSelect: (id: number) => void;
}

class UserCard extends PureComponent<UserProps> {
  handleClick = () => {
    this.props.onSelect(this.props.user.id);
  }
  
  render() {
    const { user } = this.props;
    return (
      <div className="user-card" onClick={this.handleClick}>
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
    );
  }
}

// This component will only re-render if the user object reference changes
// or if the onSelect function reference changes