SolidJS•2mo ago

Questions about migrating from MobX

Hi, SolidJS newbie here with 8 years of MobX React experience. Couple of Qs: 1. I'd like to use class-based stores whenever possible. Is there anything I need to be aware of when using them? 2. Is store performance adequate? For example, can I update a string value at 60 FPS like this?

this.setStore('message', this.state.message + content)

this.setStore('message', this.state.message + content)

3. setStore vs. setState: Here is setState, https://docs.solidjs.com/concepts/stores#path-syntax-flexibility but later on it starts recommending using setStore https://docs.solidjs.com/concepts/stores#appending-new-values 4. Is appending to an array better than setState with .push()? 5. Is there any performance advantage to using produce? If I'm using my own setter function for each value, then I cannot use produce. Is there any disadvantage to this?

3 Replies

Alex Lohr•2mo ago

1. Solid stores only make the items within array and object reactive, class instances are not handled. The idiomatic solution is to use plain objects instead of classes, since most states are used only once, so classes for that are considered to be over engineered. 2. You should be able to update a few hundred strings at 60fps on a mid-tier cellphone using solid. 3. The only official best practice about signals and stores is using [thing] for the getter and set[Thing] for the setter, but that's more convention than a given rule. 4. The most performant way is using setState('array', state.array.length, newItem) 5. Both produce and reconcile are more helpers to enable bridges to other reactive systems rather than tools meant to improve performance; you're better off with your own setter.

hyperknotOP•2mo ago

Thank you Alex! Sorry, I wasn't clear, I'd never use classes for that kind of use. I simply want to have my store in a class, like this:

class ChatStore {
  constructor() {
    const [state, setStore] = createStore({
      apiKey: localStorage.getItem('apiKey') || '',
      messages: [],
      currentMessage: '',
      isStreaming: false,
    })

    this.state = state
    this.setStore = setStore
  }

  setStoreOnce(updater) {
    this.setStore(produce(updater))
  }

  resetChat() {
    this.setStoreOnce((s) => {
      s.messages = []
      s.currentMessage = ''
      s.isStreaming = false
    })
  }

class ChatStore {
  constructor() {
    const [state, setStore] = createStore({
      apiKey: localStorage.getItem('apiKey') || '',
      messages: [],
      currentMessage: '',
      isStreaming: false,
    })

    this.state = state
    this.setStore = setStore
  }

  setStoreOnce(updater) {
    this.setStore(produce(updater))
  }

  resetChat() {
    this.setStoreOnce((s) => {
      s.messages = []
      s.currentMessage = ''
      s.isStreaming = false
    })
  }

It works well, but I don't know how much is it a pattern / antipattern in Solid land.

Alex Lohr•2mo ago

We're not opinionated as to where to store your stores. Could be a direct export, an object, class instance or a context provider class and use-hook.

Gaming

Programming

Questions about migrating from MobX