@joystick.js/ui

lifeycle.on_update_props()

How to use the lifecycle.on_update_props() method to respond to props changes on a component.

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

Example Usage

ui/pages/index/index.js

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

const Index = joystick.component({
  lifecycle: {
    on_update_props: (existing_props = {}, new_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.

API

Definition
on_update_props(existing_props: object, new_props: object, component_instance: object) => undefined
Parameters
existing_props object required
The component's props before the update.
new_props object required
The component's props after the update.
component_instance object required
The current component instance.