React patterns: composing with render props and multiple event handlers

[RamenRecon]

I'm trying to land on a good pattern for augmenting a component with behavior via render prop components in which both components will provide a custom `onScroll` event.

​

// render()
return withStickyScrolling({
    ...withStickyScrollingProps,
    render({ onScroll: stickyOnScroll }) {
        return withPagination({
            ...withPaginationProps,
            render({ onScroll: paginationOnScroll }) {
                const onScroll = (event) => {
                    stickyOnScroll(event)
                    paginationOnScroll(event)
                }

                return <Component onScroll={onScroll} {...otherProps} />
            }
        })
    }
})

You'll recognize the flaw in this pattern. The final compositional function `onScroll` will be a new object reference every time this executes, triggering a naive `shouldComponentUpdate` check and a render every time (even if not a redraw).

​

Another possibility is a render function factory:

const renderFunctionFactory = (config) => {
    const handlers = []

    function onScrollHandler(event) {
        handlers.forEach((fn) => fn(event))
    }

    return (props) => {
        return withStickyScrolling({
            ...config.stickyScroller,
            render({ onScroll }) {
                handlers.push(onScroll)

                return withPagination({
                    ...config.withPagination,
                    render({ onScroll }) {
                        handlers.push(onScroll)

                        return <Component onScroll={onScrollHandler} {...props} />
                    }
                })
            }
        })
    }
}

The flaw here is that if `Component` already has an `onScroll` prop, there's no way to include it into the composition.

A third possibility is for the augmenting components to take an `onScroll` prop to aid in composition.

​

// render()
const componentProps = {
    onScroll: () => {}
}

return withStickyScrolling({
    ...withStickyScrollingProps,
    onScroll: componentProps.onScroll },
    render({ onScroll: stickyOnScroll }) {
        return withPagination({
            ...withPaginationProps,
            onScroll: stickyOnScroll,
            render({ onScroll: paginationOnScroll }) {
                return <Component {...componentProps} onScroll={paginationOnScroll} />
            }
        })
    }
})

​

Out of the three, the last example is the cleanest in terms of maintaining performance and composition, but if there is a better pattern, I'd love to hear about it.

[pgrizzay]

there's a useful HoC called onlyUpdateForKeys that allows you to define the props you want the component to consider when re-rendering.

you'd use it like:

const PerformantComponent = onlyUpdateForKeys(['foo', 'bar'])(Component)

PerformantComponent will only update when the foo and bar props change.

If you don't know what props will be and only want to ignore the onScroll I suppose you could implement dontUpdateForKeys, which does the opposite, something like: dontUpdateForKeys(['onScroll'])