Rendering

A render in Qwik is when the component's top level function runs, including the JSX in the return statement.

export default component$(() => {
  return <div>Hello</div>
})

// I'm the top level function / render function
() => {
    // I am the JSX that gets outputted during the render
    return <div>Hello</div>
}

import { component$, useSignal } from "@qwik.dev/core";

export default component$(() => {
	const isRendered = useSignal(false);

	return (
		<div>
			<button
				type="button"
				onClick$={() => {
					isRendered.value = !isRendered.value;
				}}
			>
				Click me
			</button>
			{isRendered.value && <NewComponent />}
		</div>
	);
});

export const NewComponent = component$(() => {
	console.log("NewComponent rendered");
	return <div>Hello</div>;
});

A re-render is when the callback function is called again.

export default component$(() => {
    return <div>Hello</div>
})