Hooks

There are a plethora of hooks available for you to use in the browser during client-code execution.

onPageLoad

The most common hook is onPageLoad(). This hook allows for execution of code after the page has fully loaded, meaning all components have been mounted and all event listeners have been attached. From the callback of onPageLoad you should return a cleanup function that will be called upon navigating away from the page where the callback was called. In the cleanpup function you can for example remove any event listeners you attached to the DOM.

An example onPageLoad callback might look like this:

onPageLoad(() => { function handleClick() { alert("Quit clickin' me!"); } window.addEventListener("click", handleClick); return () => window.removeEventListener("click", handleClick); })

If callback is side-effect free, meaning it doesn't require cleanup, you can safely omit returning a cleanup function.

Notes

onPageLoad should be called at the top level of your page, and acts as a no-op on the server.

Component Lifecycle Hooks

Component lifecycle hooks refer to methods in a component definition that get called at different points during the lifetime of a component.

They are onMount, onUnmount, onNavigate and init.

You can read more about components and their hooks here