Q:

factory functions for React components

I've been reading some Eric Elliott's articles about React and how he wraps components in factory functions:

https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918 <-- JSX Looks Like An Abomination.  But it’s Good for You
https://medium.com/javascript-scene/baby-s-first-reaction-2103348eccdd <-- Baby’s First Reaction.  A “Hello, World” Example for React
https://medium.com/@_ericelliott/what-do-you-mean-by-does-not-work-could-you-reproduce-the-problem-on-codepen-io-as-i-understand-d24903a14a0 <-- One of the above article comments. 

If you've read one of the articles you might have seen an example code similar to this:
const productFactory = ( { React, PropTypes } ) => {

    const Product = ( props ) => {

        return {
            props,

            render() {
                const { name, description, price, quantity, _id } = this.props.product

                return (
                    <div className="col-md-4 col-sm-6 col-xs-12 product">
                        <div className="product-content">
                            <div className="product-head">
                                <div className="product-title">
                                    { name }
                                </div>
                                <div className="product-description">
                                    { description }
                                </div>
                            </div>

                            <div className="product-price">
                                $ { price }
                            </div>
                            <button className="btn-std btn-qty" onClick={ () => { this.props.removeProduct( _id ) } }>-</button>
                            <span className="qty">{ quantity }</span>
                            <button className="btn-std btn-qty" onClick={ () => { this.props.addProduct( _id ) } }>+</button>
                        </div>
                    </div>
                )
            }
        }
    }

    Product.propTypes = {
        product: PropTypes.object.isRequired,
        addProduct: PropTypes.func.isRequired,
        removeProduct: PropTypes.func.isRequired,
    }

    return Product
}

export default productFactory

The author of these articles says about this pattern:
I export factories for all components, rather than directly exporting the components themselves.  This provides two advantages:
1) I always pass React in on an options object, so components don’t need to import a potentially conflicting React or assume that React is available as a global.  <-- https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#95b7
2) You can relay anything you want through all components in the options hash, and all components will have access to it.  <-- even CSS shared styles by your app
The part I don't get is when he says "You might also notice that the component doesn’t have any notion of what the event listeners are doing.  I used a trick here that makes the component really easy to test and reuse in any app — I wrapped it in a factory function." 
Why is this easier to test and reuse that having the module exporting the actual component instead of a factory function? 
Thanks a lot! 

A:

This method of using factories usually is to handle dependency injection (DI) and do inversion of control (IoC). 
when you create a component all the dependencies and behaviour is set in stone.  but with this approach your they are separated out.  You can create a new components which would have the same template but with different behviour and dependencies. 
There are few advantages in development but in testing this would be very useful.  
In developement

I could use this same file in different apps to create similar components which is a huge win win for reuse. 

For testing

I could test the component by creating it with different version of react and see the differences. 
I could pass different stubs and spies instead of using the actual behaviour. 
I could use a newer version of a service or dependencies and create a new components just for testing without actually needing to create in the app directly for TDD. 

These are some of the advantages that i can think of immediately and why the author recommends this approach, as far as i understand.  But the actual author might have different intentions for using this approach also.