SebastianVerified account

Yeah, been thinking on that a bit. Most HoCs today seem to take inputs when you create it: export default withMedia(query)(Comp) But with this idea you don't have static inputs like that, only dynamic, so the wrapper and the inner component will just have to share props.

If its a tradeoff you don't want to make I suppose you can just wrap the render prop version in your own HoC implementation.

If you've got ideas, I'd love to hear them.

For HOCs I like to write it out: let WithMedia = props => <SomeComp {...props} small={useMedia(“(max-width: 480px)”)} />; That way you have a function component in place to expand on and add more logic/hooks into as a partial refactor.

Then you can expand on it as needed. This is a little boilerplatey once you add ref and dynamic args but now you have a foundation for a function component. let WithMedia = forwardRef(({query, ...props}, ref) => <SomeComp {...props} ref={ref} small={useMedia(query)} />;

For render prop it seems pretty easy to just write it out with a snippet. let Media = ({query, children}) => children(useMedia(query));

Yeah maybe it's just as easy to write it out. There is that weird effect though of having a "thing", like hoist-react-statics. People are sometimes more likely to "do the right thing" if there's a something that does it for them, whether or not its easier.

Yea I wonder if should find a way to make "snippets" be the "thing". I've been thinking this about a lot of Hooks. They get so much more complicated to expand (and harder to compile well) when they try to be overly generic.