How to react on props change

[fellmann]

Given a simple component:

import { reaction } from "mobx";
import { observer } from "mobx-react-lite";
import { useEffect } from "react";

const TestComponent = function TestComponent(props: { a: string; b: string }) {
  useEffect(
    () =>
      reaction(
        () => props.a,
        () => {
          fetch("/api/" + props.a + "/" + props.b);
          // ... save to local state
        }
      ),
    []
  );
  return <>...</>;
};
export default observer(TestComponent);

This does not trigger. What is the best way to react to props changes? useEffect would be an option, but then the "exhaustive deps" lint rule usually complains, because only a is listed as dependency.
Back in the days of @observer class TestComponent, I remember props were automatically transformed to observables. This seems not be true anymore? This makes combining props and locally stored observables in reactions much more complicated.
Or is there an easy solution I don't see?

[urugator]

https://mobx.js.org/react-integration.html#computed-props

Either use effect to move props to local observables and another effect with reaction accessing only observables.
Or unwrap observables to immutable primitives and pass them as deps to normal useEffect without reaction.
Or don't do it reactively and move the effect to an action that caused the props to update.

I remember props were automatically transformed to observables.

This was only possible with classes and we're actually about to remove this feature.

This makes combining props and locally stored observables in reactions much more complicated.

Yes, ideally try to avoid that.

[fellmann]

I came up with a simple solution: a hook that wraps the props as an observable. Not sure if this approach has any downsides - if you use observableProps in rendering, it will render twice. But if you don't, I see no problems. Comments?

const useObservableProps = <T extends object>(props: T) => {
  const store = useLocalObservable(() => props);
  useEffect(
    action(() => {
      Object.assign(store, props);
    }),
    [props]
  );
  return store;
};

const TestComponent = observer((props: { text1: string; text2: string }) => {
  const observableProps = useObservableProps(props);

  useEffect(() => autorun(() => console.log("Text 1", observableProps.text1)), []);
  useEffect(() => autorun(() => console.log("Text 2", observableProps.text2)), []);

  console.log("Render TestComponent");

  return (
    <div>
      {props.text1} {props.text2}
    </div>
  );
});

The example is just for illustration, it only makes sense to use this if you combine local state with global state.