The HOC + Render Props Patterns I Still Read in Legacy Repos

// withCounter is the textbook HOC: it accepts a component and returns a new
// component that injects extra props (count and increment). The wrapped
// component cannot tell if its count came from local state or from a parent.
// We need a class harness because the wrapped component is a class; in real
// React this is just `extends React.Component`.

class Component {
    constructor(props) { this.props = props || {}; this.state = {}; }
    setState(patch) { this.state = Object.assign({}, this.state, typeof patch === 'function' ? patch(this.state) : patch); this._render && this._render(); }
}

// The HOC. Wraps any component and gives it { count, increment } props.
function withCounter(Wrapped, initial) {
    return class WithCounter extends Component {
        constructor(props) {
            super(props);
            this.state = { count: initial || 0 };
            this.increment = () => this.setState((s) => ({ count: s.count + 1 }));
        }
        render() {
            const enhanced = Object.assign({}, this.props, {
                count: this.state.count,
                increment: this.increment,
            });
            const inner = new Wrapped(enhanced);
            inner.props = enhanced;
            return inner.render();
        }
    };
}

// A consumer that knows nothing about counter state.
class ClickCounter extends Component {
    render() {
        const { count, increment, label } = this.props;
        return { type: 'button', props: { onClick: increment }, children: [label + ': ' + count] };
    }
}

const Wrapped = withCounter(ClickCounter, 5);
const instance = new Wrapped({ label: 'clicks' });
const tree1 = instance.render();
console.log('initial render:', tree1.children[0]);
console.log('button props -> count injected, increment is a function:',
    'count' in tree1.props ? 'no (in children)' : 'count in injected props',
    typeof instance.increment);
instance.increment();
const tree2 = instance.render();
console.log('after increment:', tree2.children[0]);
instance.increment();
instance.increment();
const tree3 = instance.render();
console.log('after two more :', tree3.children[0]);

// The render-props alternative inverts the call shape: instead of wrapping
// the consumer, you ship a stateful component whose only job is to expose its
// state via a `render` prop (or function-as-children). Same data flow,
// different ergonomics. Tracker calls in the React docs c. 2017.

class Component {
    constructor(props) { this.props = props || {}; this.state = {}; }
    setState(patch) { this.state = Object.assign({}, this.state, typeof patch === 'function' ? patch(this.state) : patch); }
}

// The provider component. Holds state, exposes it via a render function.
class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: props.initial || 0 };
        this.increment = () => this.setState((s) => ({ count: s.count + 1 }));
    }
    render() {
        const renderFn = this.props.render || this.props.children;
        if (typeof renderFn !== 'function') return null;
        return renderFn({ count: this.state.count, increment: this.increment });
    }
}

// Usage. The consumer is no longer a separate component; it is a function
// passed inline. The state from Counter flows through that function's args.
const counter = new Counter({
    initial: 10,
    render: ({ count, increment }) => ({
        type: 'button',
        props: { onClick: increment },
        children: ['clicks: ' + count],
    }),
});

const first = counter.render();
console.log('first render:', first.children[0]);
counter.increment();
console.log('after increment:', counter.render().children[0]);

// Function-as-children variant. Identical behaviour, different prop name.
const counterChildren = new Counter({
    initial: 0,
    children: ({ count, increment }) => ({
        type: 'span',
        props: {},
        children: ['fac=' + count + ' (next: ' + (increment ? 'wired' : 'not wired') + ')'],
    }),
});
console.log('children variant:', counterChildren.render().children[0]);

// A useful HOC variant that maps and filters props on the way down. Used for
// theming layers, feature flags, or compatibility shims where the wrapped
// component expects a slightly different prop shape than what the parents
// actually pass. The proxy is also where you would add prop-collision
// detection in a real production HOC.

class Component {
    constructor(props) { this.props = props || {}; }
}

// Generic props-proxy. Takes a transform fn that runs over the incoming props
// and returns the props the inner component should receive. Optional filter
// drops keys you do not want to forward at all (analytics props that should
// stay at this layer, etc.).
function withPropsProxy(Wrapped, transform, filter) {
    return class PropsProxy extends Component {
        render() {
            const incoming = this.props;
            // Apply transform first so it can read the original props, then
            // filter out keys we do not want to forward (component-level
            // concerns like `variant` or `featureOff`).
            const merged = transform ? transform(Object.assign({}, incoming)) : Object.assign({}, incoming);
            const passing = {};
            for (const key of Object.keys(merged)) {
                if (filter && filter(key, merged[key])) continue;
                passing[key] = merged[key];
            }
            const inner = new Wrapped(passing);
            inner.props = passing;
            return inner.render ? inner.render() : ('Wrapped(' + JSON.stringify(passing) + ')');
        }
    };
}

class Button extends Component {
    render() {
        return {
            type: 'button',
            props: { className: this.props.className, disabled: this.props.disabled },
            children: [this.props.label],
        };
    }
}

// Theming proxy: turns variant=primary into className=btn-primary, drops
// theme so it does not bleed onto the DOM.
const ThemedButton = withPropsProxy(
    Button,
    (props) => Object.assign({}, props, {
        className: 'btn-' + (props.variant || 'default') + (props.theme ? ' theme-' + props.theme : ''),
    }),
    (key) => key === 'variant' || key === 'theme' // drop these from forwarding
);

const primary = new ThemedButton({ variant: 'primary', theme: 'dark', label: 'Save' });
const tree = primary.render();
console.log('themed button class:', tree.props.className);
console.log('label:', tree.children[0]);
console.log('variant/theme were not forwarded (no theme prop on inner):', !('variant' in tree.props), !('theme' in tree.props));

// Feature-flag proxy: disable the button if a flag is set.
const FlaggedButton = withPropsProxy(
    Button,
    (props) => Object.assign({}, props, {
        disabled: props.disabled || props.featureOff === true,
    }),
    (key) => key === 'featureOff'
);

const flagged = new FlaggedButton({ featureOff: true, label: 'Beta only' });
console.log('flag-disabled tree:', JSON.stringify(flagged.render()));

// The HOC trap: passing a ref through a wrapper does not work by default.
// Refs are not props in the React sense, and a wrapper that just forwards
// `props` will silently swallow any ref the parent attaches. The fix is
// React.forwardRef inside the HOC, with the inner component accepting the
// ref as a regular argument.

class Component {
    constructor(props) { this.props = props || {}; }
}

// Tiny stand-in for React.forwardRef. The real one returns a special
// component type; we just return a function that takes (props, ref).
function forwardRef(renderFn) {
    return function ForwardedComponent(props, ref) {
        return renderFn(props || {}, ref);
    };
}

// withLogging is a wrapper that adds a console.log on every render (the
// canonical "add an aspect" HOC). It also needs to forward refs cleanly.
function withLogging(Wrapped) {
    function Inner(props, ref) {
        if (typeof console !== 'undefined') console.log('render', Wrapped.name || 'anonymous');
        const enhanced = Object.assign({}, props, { ref });
        const instance = new Wrapped(enhanced);
        instance.props = enhanced;
        // In real React, the ref is attached when the inner renders to a DOM node.
        // We mimic that by writing the instance into ref.current.
        if (ref && typeof ref === 'object') ref.current = instance;
        return instance.render();
    }
    return forwardRef(Inner);
}

class TextInput extends Component {
    focus() { this._focused = true; }
    render() {
        return { type: 'input', props: { value: this.props.value }, children: [] };
    }
}

const LoggedInput = withLogging(TextInput);

// Parent attaches a ref to the wrapper. Without forwardRef, this would be null.
const inputRef = { current: null };
LoggedInput({ value: 'hello' }, inputRef);

console.log('ref.current is the inner instance:', inputRef.current instanceof TextInput);
console.log('we can call its imperative methods:', typeof inputRef.current.focus);
inputRef.current.focus();
console.log('focus was applied to inner, parent never touched the wrapper:', inputRef.current._focused);

// What happens without forwardRef (the bug). The wrapper just ignores the
// ref argument, so parent.ref stays null.
function brokenWrap(Wrapped) {
    return function BadWrapper(props /* no ref! */) {
        const instance = new Wrapped(props);
        instance.props = props;
        return instance.render();
    };
}
const BrokenInput = brokenWrap(TextInput);
const brokenRef = { current: null };
BrokenInput({ value: 'world' });
console.log('without forwardRef, parent ref stays null:', brokenRef.current);