Advanced React Patterns

Render Props & Higher-order Component

https://github.com/malcolm-kee/meetup-react-patterns

<Malcolm />

  • Frontend Engineer at Kreloses
  • malcolm@malcolmkee.com
  • github.com/malcolm-kee
  • twitter.com/Malcolm_Kee

Reusing UI in React

<List>
    <ListItem text="A" />
    <ListItem text="B" />
    <ListItem text="C" />
</List>

Reusing behavior?

export class ComponentWithModal extends React.Component
{
    state = {
        showModal: false
    }
    toggleShowModal = () => {
        // 
    }
}

Render Props

<BehaviorComponent
    option={someOptionValue}
    render={data => 
        <VisualComponent data={data} />}
/>

Render Props =

delegates rendering

<Toggle
    // delegate behavior
    onToggle={toggleHandler}    
    // delegate rendering
    render={({ toggle, on }) =>
        <Switch on={on} onClick={toggle} />} 
/>

Alternative Format

<BehaviorComponent>
    {data => <VisualComponent data={data} />}
</BehaviorComponent>

Libraries using render props

  • formik
  • downshift
  • react-motion
  • react-router
  • React Context (16.3+)

Higher-order Component

const HOC = Component => EnhancedComponent

HOC with currying

const HOC = (option1, option2) => Component => 
    EnhancedComponent

Example: React Redux

const connect = (mapStates, mapDispatch) => Component =>
    ConnectedComponent

Example: React Router

const withRouter = Component => RoutedComponent

HOC = Decorator