SolidJS•4w ago

How do you refresh a non-solid children?

I'm using lexical editor inside one SolidJS component. It is initialised using ref={ref} + onMount(). It works correctly, mounts, unmount cleanups, etc. everything is fine. Now I need to programmatically clear it's content from a global store. I see two solutions: 1. register the editor instance (created inside onMount) into the store, and unregister it on unmount, so that I can call a .clear() command on it. 2. somehow trigger a component re-render from the global store. In React, it'd do this by putting a random number inside a key, like this:

<UserInput
  chat={props.chat}
  key={props.chat.state.userInputRefreshID}
/>

<UserInput
  chat={props.chat}
  key={props.chat.state.userInputRefreshID}
/>

But in Solid this key of course doesn't exist. How can I achieve the same behaviour? I mean I want <UserInput> to be discarded and recreated, with all the cleanups / onMounts run. Solution 1. is probably workable, but I think it's very bug prone, with all the registering / unregistering / synching of editor instances to global state. I'd rather choose 2. and discard and and recreate the component altogether. One idea between 1 and 2 seems to be to use a random number but use it in a createEffect, to call the clear function:

  createEffect(() => {
    console.log(props.chat.state.userInputRefreshID, editor)
    editor?.update(() => {
      $getRoot().clear()
    })
  })

  createEffect(() => {
    console.log(props.chat.state.userInputRefreshID, editor)
    editor?.update(() => {
      $getRoot().clear()
    })
  })

How do I make this run only on the 2nd, etc. subsequent updates and not at the same time as onMount?

10 Replies

hyperknotOP•4w ago

An alternative idea seems to toggle a show boolean quickly, like:

    this.setState('userInputShow', false)
    this.setState('userInputShow', true)

    this.setState('userInputShow', false)
    this.setState('userInputShow', true)

Then I use

{props.chat.state.userInputShow && <UserInput chat={props.chat} column={props.column} />}

{props.chat.state.userInputShow && <UserInput chat={props.chat} column={props.column} />}

This seems to work

bigmistqke•4w ago

<Show/> has a keyed-prop that will cause its children to be unmounted/remounted whenever it changes:

<Show when={props.chat.state.userInputRefreshID} keyed>
   <UserInput chat={props.chat}/>
</Show>

<Show when={props.chat.state.userInputRefreshID} keyed>
   <UserInput chat={props.chat}/>
</Show>

hyperknotOP•4w ago

OK, great, so it's the same as

    this.setState('userInputShow', false)
    this.setState('userInputShow', true)

    this.setState('userInputShow', false)
    this.setState('userInputShow', true)

Having said it, this loses focus, so

createEffect(() => {
    console.log(props.chat.state.userInputRefreshID, editor)
    editor?.update(() => {
      $getRoot().clear()
    })
  })

createEffect(() => {
    console.log(props.chat.state.userInputRefreshID, editor)
    editor?.update(() => {
      $getRoot().clear()
    })
  })

actually has an advantage. There, I'd just need to make sure the createEffect doesn't run with onMount, but only on 2nd, 3rd, etc. updates. Do you know how to do this? My only idea is to make a signal originalRefreshID and then compare it inside createEffect. But is there no built-in way to do this? I mean, to skip the first run of an onMount?

bigmistqke•4w ago

something like:

let initialized = false
createEffect(on(() => props.chat.state.userInputRefreshID, () => {
  if(initialized){
    editor?.update(() => {
      $getRoot().clear()
    })
  }
  initialized = true
}))

let initialized = false
createEffect(on(() => props.chat.state.userInputRefreshID, () => {
  if(initialized){
    editor?.update(() => {
      $getRoot().clear()
    })
  }
  initialized = true
}))

you can also do

let initialized = false
createEffect(() => {
  props.chat.state.userInputRefreshID
  if(initialized){
    editor?.update(() => {
      $getRoot().clear()
    })
  }
  initialized = true
})

let initialized = false
createEffect(() => {
  props.chat.state.userInputRefreshID
  if(initialized){
    editor?.update(() => {
      $getRoot().clear()
    })
  }
  initialized = true
})

createEffect(() => {
  if(props.chat.state.userInputRefreshID){
    editor?.update(() => {
      $getRoot().clear()
    })
  }
})

createEffect(() => {
  if(props.chat.state.userInputRefreshID){
    editor?.update(() => {
      $getRoot().clear()
    })
  }
})

and only set userInputRefreshID when u want to reset it + tangentially related: if u don't want to increment a counter you can also do

const [listen, trigger] = createSignal<void>(null!, { equals: false })

createEffect(on(listen, () => ...))
...
trigger()

const [listen, trigger] = createSignal<void>(null!, { equals: false })

createEffect(on(listen, () => ...))
...
trigger()

hyperknotOP•4w ago

thanks! What does this listen-trigger do? I've just found the following in the docs:

In addition, on provides a defer option that allows the computation not to execute immediately and only run on first change.

Do you think it might be exactly what I need?

createEffect(on(a, (a) => {
  console.log(a, b());
}, { defer: true }));

createEffect(on(a, (a) => {
  console.log(a, b());
}, { defer: true }));

bigmistqke•4w ago

just a way how you can trigger effects without having to increment some random number neat! sounds exactly what u need!

hyperknotOP•4w ago

great! For this, I just don't understand the (null!, { equals: false }) part.

bigmistqke•4w ago

{ equals: true } will compare the new value with the old value and only call all the effects/memos/... when it changed, { equals: false } will always update, and call all the effects/memos/... null! is just to add some initial value

hyperknotOP•4w ago

I see! Thanks!

bigmistqke•4w ago

ur welcome!!

Gaming

Programming

How do you refresh a non-solid children?

Did you find this page helpful?