Component

Components are JavaScript functions. They accept arbitrary arguments as props and return elements describing the appearance and behavior of the interface.

function Example (props) {
	return 'Hello'
}

Function

There are however different offerings that JavaScript affords when creating functions the first two of which are arrow and regular functions.

const Arrow = props => 'Hello'
const Regular = function (props) { return 'Hello' }

Both of which will create a component that render the text content "Hello".

Async Function

Async functions work much the same as regular function, with the exception that they involve promises:

async function Example (props) {
	return 'Hello'
}

The example returns a Promise that resolves to the string "Hello". The reconciler can understand this and will render "Hello" once the Promise has resolved.

Generator Function

JavaScript affords authors a syntax by which to create generator functions that return an iterable.

function* Example (props) {
	yield 1
	yield 2
	yield 3
}

The example function as a component would render an array of numbers 1 to 3.

Element

Component elements are elements with a function type.

h(
	type: function
	props?: Props
	...children?: any
)

Props

Props passed to components elements are forwarded to the component function as "props".

interface Props {
	readonly [prop: string]: any
	readonly children?: any
}

Children

Children arguments passed to component elements are assigned to props as "children": props.children. The component children prop is an opaque data-structure; This means that the "typeof" value could vary, ranging from an array when the number of children are more than one or a primtive, function or object, when a single child is passed.

h(props => console.assert(props.children === 1), {}, 1)

State & Lifecycle

Through hooks components can both keep persitant state and hook into a lifecycle system that is invoked at specific set times where applicable. These come in the form of hooks such as useState, useEffect and more.