How to mix the react state with mst models

[R-iskey]

Hey, I try to realize how I can mix the MST model with React state.
This is my observed component

interface IFormInputs {
    name: string;
    members: string[];
    tags: string[];
}

export type IEditDrawerFormData = {
    name: string;
    members: IMembersModel[];
    tags: ITagSnapshotOut[];
    type: string;
    id: string;
}

const {requiredRule} = FormValidators;

export interface IRightDrawerFormProps {
    formData: IEditDrawerFormData;

    onRequestClose?(): void;

    onSave(formData: any): void;
}

function DrawerEditForm({onRequestClose, onSave, formData}: IRightDrawerFormProps) {
    const {name, members, tags, breadcrumbs, type, id} = formData;

    const {handleSubmit, control, errors} = useForm<IFormInputs>();

    const [selectedUsers, setSelectedUsers] = useState<IMember[]>([]);
    const [selectedTags, setSelectedTags] = useState<ITag[]>([]);

    // the useEffect doesn't fire when members model changed
    useEffect(() => {
        setSelectedUsers(members);
        setSelectedTags(tags);
    
    }, [members, tags]);

 
    return (
        <SafeAreaViewStyled>
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <DrawerContentStyled>
                    <Text>hello</Text>
                </DrawerContentStyled>
            </TouchableWithoutFeedback>
        </SafeAreaViewStyled>

    );
}

export default observer(DrawerEditForm);

Am I need to use Autorun or Reaction or we have a much more solid solution with 'mobx-react'?

[EmilTholin]

Hi @R-iskey!

Do you think you could create a minimal example on e.g. CodeSandbox? It's hard to say from the code in your question what your problem is.

[BATCOH]

As MST is MobX-driven you can use whatever that works with plain MobX.
Currently the most convenient way to do so is by wrap your components with observer from mobx-react-lite package. Or observer from mobx-react if you really need to use MST inside class-based components.
Then your component will be updated (re-rendered) automatically on any change of values, observed from inside of the component.

In this case you maybe don't need any local component state for observables at all. But if you do so — useEffect should fire when its deps changed as expected.

See also: https://mobx.js.org/react-integration.html