Hooks

They let you use state and other React features without writing a class.

Motivation

reuse component logic

render props

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

<DataProvider render={data => (
    <h1>Hello {data.target}</h1>
)}/>

A render prop is a function group that a component uses to know what to render.

class Cat extends React.Component {
    render() {
        const mouse = this.props.mouse;
        return (
            <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.left, top: mouse.y }} />
        );
    }
}


class Mouse extends React.Component {
    constructor(props) {
        super(props);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.state = { x: 0, y: 0 };
    }
    
    handleMouseMove(event) {
        this.setState({
           x: event.clientX,
           y: event.clientY
        });
    }
    
    render() {
        return (
            <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
                {this.props.render(this.state)}
            </div>
        );
    }
}

higher-order components(HOC)

A higher-order component is a function takes a component and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

function withSubscription(WrappedComponent, selectData) {
    class WithSubscription extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.state = {
                data: selectData(DataSource, props)
            };
        }
        
        componentDidMount() {
            DataSource.addChangeListner(this.handleChange);
        }
        
        componentWillUnmount() {
            DataSource.removeChangeListener(this.handleChange);
        }
        
        hanldeChange() {
            this.setState({
                data: selectData(DataSource, this.props)
            });
        }
        
        render() {
            return <WrappedComponent data={this.state.data} {...this.props} />
        }
    }
    
    WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
    
    return WithSubscription;
}

function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
);

Mixins

Why Mixins are Broken

• Mixins introduce implicit dependencies
• Mixins cause name clashes
• Mixins cause snowballing complexity

Complex components become hard to understand

Classes confuse both people and machines

Reference

https://reactjs.org/docs/hooks-intro.html