How to make Ionic React implementation respect UI = f(state)?

Question

Ionic React seems not respecting UI = f(state).

I started an application with ionic start ionic-tests tabs --type react import IonCheckbox from @ionic/react and used with <IonCheckbox checked />, the expected behavior while clicking is keep checked, but the checkbox was toggling...

Is it the Ionic purpose? There is any way to ensure Ionic React UI as state function?

Ionic uses stencil (web-components) and a layer (called output targets) to solve some connection problems with React. By investigating the code I saw about the @Prop decorator with the mutability option, but it seems doesn't work (so what is the point about the mutability option?).

Answer 1

manage state

const [checked, setChecked] = useState<boolean>(true);

render

<IonCheckbox
  checked={checked}
  onIonChange={(e: any) => setChecked(e.detail.checked)}
></IonCheckbox>

https://ionicframework.com/docs/api/checkbox