Adding a default render function that renders null for components

[chrisvfritz]

Right now, the pattern that's been called "renderless components" doesn't make complete sense, because technically, those components still need a render function that just returns null:

render: () => null

What are thoughts on removing the need for either a template or render function in components, by default rendering null?

[yyx990803]

Isn't renderless components ones that returns content from scoped slots? They still do need the render function to do their jobs.

I can't think of a case where a component without render/template would make sense.

[LinusBorg]

I agree with Evan here, I know the term referring to components that render a scoped slot, and usually no markup of their own. They only provide functionality through the slot props and don't render any markup of their own.

The term is not perfect and I think it was coined by the React community when using renderProps / a function as children. The Vue community picked it up as the underlying pattern matched what scoped slots do in Vue.

[posva]

I also think the term doesn't completely fit those components.

Regarding removing render, I think, it's almost never done except for components having side effects, so it's better to not have it by default. Usually people writing these kind of components do have a very advanced knowledge on Vue

[chrisvfritz]

@yyx990803 @LinusBorg @posva I think you're thinking of "container" components, but I'm referring to components that use the provide/inject interface to render non-XML (e.g. Canvas, WebGL, Audio, etc). For example:

<MapboxMap>
  <MapboxMarkers :items="cities" />
  <MapboxNavigation />
</MapboxMap>

This map uses WebGL, so MapboxMap will render a root container element plus the default slot, but MapboxMarkers and MapboxNavigation both have to render null to keep Vue happy. I actually find myself using this pattern at some point in most medium-to-large apps to componentize non-XML browser APIs and 3rd-party libraries, but I also do a lot of data visualization. 😄

[Jinjiang]

@chrisvfritz I think most cases a component need a render function. Sometimes developers may get mistakes to miss a valid <template> or render() function. That would cause nothing rendered which may make the developers lost I think. So if there is no render function written or generated, we can catch the mistake for the developers by default. If a component does not need a render function like <MapboMarkers>, it's OK to write a nope function explicitly IMO. 😉
Thanks.

[chrisvfritz]

That works for me. 🙂 I don't have any further arguments, so I'll close.