ready

ready(fn) schedules a callback to run once the current render batch is connected to the DOM, before the next paint — the place for components that need to run some initialization.

A ready callback runs once the current processing batch is done — i.e. after the full queue of connected callbacks has been processed, and before the next paint. By then, the elements produced by the scope should already be connected to the document. For a callback that also waits on tracked async work, see readyAsync.

Arguments

name	type	description
fn	() => void	function to run once the processing batch is done

Examples

Snippet

Runs an initialization callback once the component's batch is ready.

import { ready, render } from 'pota'

function Component() {
	ready(() => render('Component is ready'))

	return <main></main>
}

render(Component)

Focus on mount

Schedules imperative work that needs the node in the DOM — measuring sizes, focusing inputs, attaching third-party widgets. ready(fn) fires after the onProps and onMount phases (refs are assigned synchronously at creation, earlier still).

import { ready, ref, render } from 'pota'

function App() {
	const input = ref<HTMLInputElement>()

	ready(() => {
		input().focus()
		input().select()
	})

	return (
		<input
			use:ref={input}
			value="select me on mount"
		/>
	)
}

render(App)

Timing

Displays current timings of ready vs connected.

import { render, ready } from 'pota'

function BeforeSibling() {
	ready(() => render(<div>ready: BeforeSibling:component body</div>))

	return (
		<section
			use:connected={() =>
				render(<div>connected: from BeforeSibling</div>)
			}
		/>
	)
}
function AfterSibling() {
	ready(() => render(<div>ready: AfterSibling:component body</div>))

	return (
		<section
			use:connected={() =>
				render(<div>connected: from AfterSibling</div>)
			}
		/>
	)
}
function Test() {
	ready(() => render(<div>ready: component body</div>))
	return (
		<main
			use:connected={() =>
				render(<div>connected: from container</div>)
			}
		>
			<section>
				<div>
					<div
						use:connected={() => render(<div>connected: deep 1</div>)}
					/>
				</div>
			</section>
			<BeforeSibling />
			<section
				use:connected={() =>
					render(<div>connected: from inlined element</div>)
				}
			></section>
			<AfterSibling />
			<section>
				<div>
					<div
						use:connected={() => render(<div>connected: deep 2</div>)}
					/>
				</div>
			</section>
		</main>
	)
}

ready(() => render(<div>ready: Top level before render</div>))

render(Test)

ready(() => render(<div>ready: Top level after render</div>))