SolidJSS
SolidJS•11mo ago•
21 replies
hyperknot

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}
/>


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()
    })
  })


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