React/Mobx Cannot Override Default Value set by Props

Question

This is probably one of those 'fundamental (lack of) understanding' problems. I'm getting into React, and working on my first major application, and have come across a problem.

Essentially it's this:

• I have a class that is storing values
• If the component sets one of the properties on that class via the props mechanism, I can never change the value of that property later (or, rather, it changes, but instantly changes back).
• If the component does NOT set the property on the class via props, all works as I would expect.

I have created a React app (using the typescript template) that shows the problem. A quick overview:

• There is the App component.
• It contains the OutsideComponent
• That contains the ParentGenericComponent. This new's up the class (ParentGenericComponentViewModel)
• That contains both the Child1GenericComponent - which sets the value on the class using props - and the Child2GenericComponent - which does not.
• ChildGenericComponent has a link with a onClick handler that programmatically sets a property to something else

As said, it's probably a lack of knowledge around a fundamental aspect of React. You will see from the code below that I am using property Setters/Getters, just so I can see the Alert. What is happening is when you click the link to change the values in the object, the alert is firing 3 times, once showing the value I want to change to, and then 2 times with the value reverting back to the 'default' value set in the props.

Why? Why is the setter being called more than once? Why is the setter being called after the first time with the default value, not the one I have changed it to?

All in it looks like this:

App.tsx

import { OutsideComponent } from './OutsideComponent';

function App() {
  return (
    <>
      <OutsideComponent />
    </>
  );
}

export default App;

OutsideCompnent.tsx

import { observer } from "mobx-react"
import { ParentGenericComponent } from "./ParentGenericComponent"

export const OutsideComponent = observer(() => {
    return (
        <>
            <div>Outside Compnent</div>
            <ParentGenericComponent />
        </>
    )
})

ParentGenericCompnent.tsx

import { observer } from "mobx-react"
import { Child1GenericComponent } from "./Child1GenericComponent"
import { Child2GenericComponent } from "./Child2GenericComponent"
import { ParentGenericComponentViewModel } from "./ParentGenericComponentViewModel"

export interface IParentGenericComponentProps {
    vm: ParentGenericComponentViewModel,
    defaultValue?: string
}

export const ParentGenericComponent = observer(() => {

    const vm = new ParentGenericComponentViewModel();

    return (
        <>
           <div>Parent Generic Component</div>
           <div><Child1GenericComponent vm={vm} defaultValue="Default Overridden In Props" /></div>
           <div><Child2GenericComponent vm={vm} /></div>
        </>
    )
})

Child1GenericComponent.tsx

import { observer } from "mobx-react"
import { IParentGenericComponentProps } from "./ParentGenericComponent"
import { ParentGenericComponentViewModel } from "./ParentGenericComponentViewModel"

export const Child1GenericComponent = observer((props: IParentGenericComponentProps) => {

    const vm:ParentGenericComponentViewModel = props.vm;
    vm.withDefault = props.defaultValue as string;
    
    const changeValues = () => {
        vm.withDefault = "withDefault changed by clicking link";
        vm.withoutDefault = "withoutDefault changed by clicking link";
    }

    return (
        <>
            <h3>Child 1 Generic Component</h3>
            <div>withDefault value: {vm.withDefault}</div>
            <div>withoutDefault value: {vm.withoutDefault}</div>
            <a href="#" onClick={changeValues}>Change Values</a>
            <hr />
        </>
    )
})

Child2GenericComponent.tsx

import { observer } from "mobx-react"
import { IParentGenericComponentProps } from "./ParentGenericComponent"
import { ParentGenericComponentViewModel } from "./ParentGenericComponentViewModel"

export const Child2GenericComponent = observer((props: IParentGenericComponentProps) => {
    const vm:ParentGenericComponentViewModel = props.vm;

    return (
        <>
            <h3>Child 2 Generic Component</h3>
            <div>withDefault value: {vm.withDefault}</div>
            <div>withoutDefault value: {vm.withoutDefault}</div>
            
            <hr />
        </>
    )
})

ParentGenericComponentViewModel.ts

import { makeAutoObservable } from "mobx";

export class ParentGenericComponentViewModel {
    constructor() {
        makeAutoObservable(this);
    }

    private _withDefault:string = "Initial Default Value";
    private _withoutDefault: string = "Initial WithoutDefault Value";

    get withDefault():string { return this._withDefault; }
    set withDefault(value:string) {
        alert(value);
        this._withDefault = value;
    }

    get withoutDefault():string { return this._withoutDefault; }
    set withoutDefault(value:string) {
        this._withoutDefault = value;
    }


}

I hope this is enough to demonstrate my issue

As mentioned above, I am expecting the setter to be called just once, with the new value that is being set by the onClick event in Child1GenericComponent.

Answer 1

After a lot more searching and experimenting, I changed Child1GenericComponent, and my problem is resolved.

It was this:

const vm:ParentGenericComponentViewModel = props.vm;
vm.withDefault = props.defaultValue as string;

It's now this:

const vm:ParentGenericComponentViewModel = props.vm;

useEffect(() => {
    vm.withDefault = props.defaultValue as string;
}, []);