reactjs - How to add a HOC into the middle of a component stack? -

i have stateless functional component renders timeline (of appointments). signature is:

function timeline({loading, start, end, data}) { ... } 

it gets data via ajax request. this, created hoc. can use this

// appointmenttimeline.jsx export default ajaxloader({     route: 'secret.url',     data: {some: 'post data'}, })(timeline); 

then needed add controls adjust timeline date range. did composition:

export default class timelinewithpicker extends react.purecomponent {     render() {         return (             <inlineblock>                 <appointmenttimeline {...this.props} start={this.state.start}/>                 {/* controls here */}             </inlineblock>         );     } } 

all of works great, i've realized timeline component has more utility thought. want re-use same component and controls different data-source.

i.e., want wrap timeline different ajaxloader. problem timelinewithpicker has appointmenttimeline baked in.

what's best way make timelinewithpicker more flexible such can render timelines different data-sources?

should pass sub-component (appointmenttimeline) in prop, or should pass route , data in props , construct new hocs on fly @ render time? i.e.,

let {data,route} = this.props; let timelineloader = ajaxloader({data,route})(timeline); return <div><timelineloader ... /></div> 

is expensive create new components in render() that?