Class-Based Object-Oriented Middleware Pipeline for Component Render Flow

import React, { useState } from 'react';
 
class RenderPassMiddleware {
  constructor(next = null) {
    this.next = next;
  }
  process(context) {
    return this.next ? this.next.process(context) : context;
  }
}
 
class SanitizePropsPass extends RenderPassMiddleware {
  process(context) {
    const cleaned = { ...context, title: context.title ? context.title.trim() : '' };
    return super.process(cleaned);
  }
}
 
export function MiddlewarePipelineView({ rawProps }) {
  const [pipeline] = useState(() => new SanitizePropsPass(new RenderPassMiddleware()));
  const processed = pipeline.process(rawProps);
 
  return <h1>{processed.title}</h1>;
}