on_update_props

Immediately after a component receives new props, if present, the on_update_props() method for the component will be called.

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

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

export default Index;

API Reference

on_update_props()

Function API

on_update_props(existing_props: object, new_props: object, component_instance: object) => void;

Arguments