Component fails to re-render on props value change #40
Description
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?