Mobx State Tree not re-rendering component

Question

I'm trying to make MST work with a simple model and a single component within my route. The update function is called correctly but the component is not rendered again.

import { observer } from 'mobx-react'
import PDFMaker from '../store'


const PDFMakerForm = observer(({pdfmaker}) => {
  console.log(pdfmaker)

  return (
    <div>
      <header>
        <label>Project Name: </label>
        <input type="text"
               value={pdfmaker.name}
               onChange={(e)=>pdfmaker.setName(e.target.value)}/>
      </header>
    </div>

  )
})

const PDF = function () {
  return <PDFMakerForm pdfmaker={PDFMaker.create()} />
}

export default PDF

And the store file is as follows:

import { types } from "mobx-state-tree"

const PDFMaker = types
  .model({
    name: types.optional(types.string, ""),
    inputFile: types.optional(types.string, ""),
    outputDir:types.optional(types.string, ""),
    dataFile: types.optional(types.string, ""),
  })
  .actions(self => ({
    setName(newName) {
      self.name = newName
    }
  }))


export default PDFMaker

I'm not sure what the issue is as PDFMakerForm is wrapped in observer already, and a valid store is being passed to the parent.

Answer 1

It seems that mobx-react v8 and mobx-react-lite v4 is bugged right now so you need to downgrade to the latest v7 or v3 respectively.

I also recommend you to not create store like that, because if your component rerenders for some reason the store will be recreated too, you could keep it in the state or in the memo at least:

  const [pdfmaker] = useState(() => PDFMaker.create());