makeCallback

makeCallback(children) returns a function that yields the rendered children — calling it again re-evaluates them with whatever arguments you pass. It's the helper flow components like <Show/>, <Switch/>, and <For/> use to support children that are either static JSX or render functions like {(item, index) => …}.

Marked components (those carrying the component tag, see markComponent) run untracked, so signals read in their body don't subscribe the caller; plain user callbacks stay tracked.

Arguments

name	type	description
children	JSX.Element | JSX.Element[]	the children to wrap (static JSX or a render fn)

Returns: (...args) => JSX.Element | JSX.Element[] — call it to render the children, forwarding args to any function children.

Examples

Re-evaluating children with arguments

Wraps a render-function child and calls it twice with different arguments to produce two rendered outputs.

import { makeCallback, render } from 'pota'

function HoverPanel(props) {
	const renderChildren = makeCallback(props.children)

	return (
		<div>
			{renderChildren('hovering')}
			{renderChildren('idle')}
		</div>
	)
}

function App() {
	return <HoverPanel>{state => <p>state is {state}</p>}</HoverPanel>
}

render(App)