React rebuild tree with HOC components (causing input field focus loss)

Question

I'm using Higher Order Components to decorate my components.

const HOC = (WrappedComponent) => (props) => {
    return (
        <span>
            <p>HOC Comp</p>
            <WrappedComponent {...props}/>
        </span>
    )
}

I do like this pattern explained here: React Higher Order Components in depth

However I have a problem because the HOC causing React to recreate my component tree instead of updating the tree. This is nicely explained here React Reconciliation . HOC returns an anonymous function whereby React doesn't know it is actually rendering the same component. This is bad for performance and makes my input field lose focus.

How could I use HOC components without React recreating my tree on every render() ?

Example code:

class Input extends React.Component {
    componentWillMount() {
        console.log('input component will mount');
    }

    componentWillUnmount() {
        console.log('input component will unmount');
    }

    render() {
        return (
            <span>
                <input value={this.props.value} onChange={this.props.onChange}/>
            </span>
        );
    }
}

const HOC = (WrappedComponent) => {
    const Help = (props) => {
        return (
            <span>
                <WrappedComponent {...props}/>
                <p>{props.help}</p>
            </span>
        )
    };

    return Help;
}

class MyComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {value : 'start value'}
    }

    onChange(event) {
        this.setState({value : event.target.value});
    }

    render() {
        const Element = HOC(Input);
        return (
            <span>
                <Element
                    value={this.state.value}
                    onChange={this.onChange.bind(this)}
                />
            </span>
        )
    }
}

ReactDOM.render(
    <MyComponent />,
    document.getElementById('container')
);

See Fiddle example (see in your browser's console to see the mount and unmount logs from the input component every time you change the input and lose your focus)

Answer 1

You don't have to create Element in the render function. Instead you can create it in the constructor:

class MyComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {value : 'start value'};
        this.element = HOC(Input);
    }
...

And use it in your render function like this:

        <span>
            <this.element
                value={this.state.value}
                onChange={this.onChange.bind(this)}
            />
        </span>

If needed you can update this.element in componentWillReceiveProps() or componentWillUpdate() .

UPDATE: fiddle

Answer 2

This is the way how I extended a functional component with a controlled input element via children and it does not lose focus.

 /* import React, { Fragment, useState } from 'react' */ const { Fragment, useState } = React /* HOC */ const withInput = Base => (props) => { const [inputValue, setValue] = useState() return <Base children={ <Fragment> {props.children}<br /> <input value={inputValue} onChange={({ target: { value }}) => setValue(value)} placeholder="input from hoc" /><br /> <span>inputValue: {inputValue}</span> </Fragment> } /> } /* Component */ const MyComponent = ({children}) => ( <span> <span>own elements</span><br /> {children} </span> ) const MyComponentWithInput = withInput(MyComponent) ReactDOM.render(<MyComponentWithInput>passed children</MyComponentWithInput>, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>