Hacker News new | ask | show | jobs
by pspeter3 3150 days ago
_On mobile so not a fully detailed response_

I came up with the pattern after discovering the issues with render callbacks and before Higher Order Components were common. You can achieve the same result with a Higher Order Component. The only benefit of this approach over an HOC is that you write a regular Component.

To implement the pattern, you make you Component expect a single child for it's `children` prop. Let's assume that the child has a `data` prop which is not set in the parent Component. In render, you return `React.cloneElement(this.props.children, { data: this.state.valueToInject })`.

The value of a Higher Order Component is that you can usually define a map to props function.

1 comments

Yep, I used this approach for a custom form change event buffering component that can wrap around input fields to allow fast updates while debouncing dispatching Redux actions: http://blog.isquaredsoftware.com/2017/01/practical-redux-par... .