LightSwitch.jsx

import { h, Component } from 'preact';
import { observer } from 'mobx-preact';
import box from 'mobx-box';

@observer
class LightSwitch extends Component {
  @box lightsOn = false;

  render() {
    return (
      <span>
        Lights {this.lightsOn ? 'On' : 'Off'}
      </span>
    );
  }
}

export default LightSwitch;

LightSwitchWithDefaultProp.jsx

import { h, Component } from 'preact';
import { observer } from 'mobx-preact';
import box from 'mobx-box';

@observer
class LightSwitch extends Component {
  @box lightsOn = false;
  
  constructor(props) {
    super(props);
    
    if (props.defaultLights) {
      this.lightsOn = props.defaultLights;
    }
  }

  render() {
    return (
      <span>
        Lights {this.lightsOn ? 'On' : 'Off'}
      </span>
    );
  }
}

export default LightSwitch;