What are functional components in Vue 3 and when should you use them?

Functional components are stateless and instanceless — they're just plain functions that receive props and render output, without a full component instance or lifecycle. They're lightweight and used for simple, performance-critical presentational elements.

In Vue 3, they're less commonly needed since regular SFCs with <script setup> are already quite lightweight; functional components mainly appear when writing custom render functions:

const FunctionalGreeting = (props) => h('div', `Hello, ${props.name}`)
FunctionalGreeting.props = ['name']