on_render

Immediately after a component is rendered for mount (or re-rendered following an existing mount), if present, the on_render() method for the component will be called.

/ui/pages/index/index.js

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

const Index = joystick.component({
  lifecycle: {
    on_render: (instance = {}) => {
      // Handle the on_render() 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_render() 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_render: (instance = {}) => {
      // Handle the on_render() event.
    },
  },
  render: ({ state, when }) => {
    return `
      <div>...</div>
    `;
  },
});

export default Index;

API Reference

on_render()

Function API

Function API

on_render(component_instance: object) => void;

Arguments

  • component_instance boolean

    The current component instance as an object.