Component fails to re-render on props value change

[svicalifornia]

I started with your functional counter example here: https://codesandbox.io/s/mobx-counterfunctions-3sqv1

First I converted it to TypeScript and got that working. Next, I abstracted the counter div to a separate component:

// CountView.tsx

interface CountViewProps {
  count: number;
}

export default function CountView({count}: CountViewProps) {
  return <div className="counter">{count}</div>;
}

Then I refactored the App component to use CountView and to also log the count to console:

// index.tsx

import { observable } from "mobx";
import { cleanup, render } from "mobx-jsx";

import CountView from "./CountView";

function App() {
  const state = observable({ count: 0 })
  const timer = setInterval(() => {
    state.count++;
    console.log(state.count);
  }, 1000);
  cleanup(() => clearInterval(timer));
  return <CountView count={state.count} />;
}

render(App, document.getElementById("app"));

The console shows that the count is incrementing, but the count in the browser doesn't update — it's stuck at 0.

Why doesn't the CountView component re-render when state.count changes?

[svicalifornia]

OK, I just found that the above issue was discussed already in issue #24. I think this deserves more explanation in the README, but for now, I'll cover my findings here.

Destructuring props outside of JSX snippets (either in the arguments list or in the render function body) doesn't work:

// This does NOT work; the component will not re-render when props.count changes.
export default function CountView(props: CountViewProps) {
  const {count} = props;
  return <div className="counter">{count}</div>;
}

Destructing props within a JSX snippet does work:

// This DOES work; changes to props.count will be rendered in the browser.
export default function CountView(props: CountViewProps) {
  return <div className="counter">{props.count}</div>;
}

I can understand why, since the CountView function is only run once in each lifecycle, and only the JSX snippets get observed and re-evaluated after that. But still, this was confusing as a newcomer!

Are there more docs for mobx-jsx beyond the README?

[ryansolid]

Not really. This was mostly a PoC when I was generalizing the approach I was developing with SolidJS. Most things that apply to Solid apply here.