on_before_mount

Before a component is mounted to screen, if present, the on_before_mount() method for the component will be called.

import joystick from '@joystick.js/ui';

const Index = joystick.component({
  lifecycle: {
    on_before_mount: (instance = {}) => {
      // Handle the on_before_mount() event.
    },
  },
  render: ({ state, when }) => {
    return `
      <div>...</div>
    `;
  },
});

export default Index;

Use caution with state

It's important to avoid calling set_state() inside of on_before_mount() to copy props or other values over to state as it can cause unwanted rendering bugs. Instead, set your default state value to a function and map the props from the instance passed to that function over to state.

import joystick from '@joystick.js/ui';

const Index = joystick.component({
  state: (instance = {}) => {
    return {
      some_value: instance?.props?.some_value,
    };
  },
  lifecycle: {
    on_before_mount: (instance = {}) => {
      // Handle the on_before_mount() event.
    },
  },
  render: ({ state, when }) => {
    return `
      <div>...</div>
    `;
  },
});

export default Index;

API Reference

on_before_mount()

Function API

on_before_mount(component_instance: object) => void;

Arguments