The latter. For function components you can use :f>.

Thank you. However, when I try to simply implement as below:

[:f> Slate {:editor editor :initialValue (clj->js initialValue)}]

What's the error?

The error shows that the :initialValue is undefined

:f> is for Reagent function components

:> for any React component, it doesn't matter if it is JS function or class

in React JS functions and JS class components are used the same way with createElement so there is no need to differentiate those

Whole :f> is just Reagent's own limitation, and just for convertin cljs functions to React components

Oh, didn't realize that :> also works for function React components.

Thank you. What if I want to re-render the slate component? If the [:>] implies create-element, I think I have to call [:>] multiple times in order to re-render the slate component.

No, re-rendering isn't related createElements calls really

Re-rendering is side-effect of the properties changing, or parent being re-rendered due to properties changing

So just update the properties and React will render it again

IF you need to re-render it again without the properties changing, the lib will probably provide some imperative API for that. Using ref or hooks e.g.

[:> Slate {:editor editor :initialValue (clj->js initialValue)}]

Slate component will get the new property value yes, but based on the name (`initial*`), internal state of the Slate component won't follow changes to that property

You can force full re-initialization of the component vs just re-render by using React keys ^{:key counter} [:> Slate ...] when counter value is changed, a completely new Slate component would be created instead of just re-rendering the previous instance

But that is a workaround and quite probably not what you want

https://docs.slatejs.org/libraries/slate-react/slate Slate once was a controlled component (i.e. it's contents were strictly controlled by the value prop) but due to features like its edit history which would be corrupted by direct editing of the value it is no longer a controlled component.

Or... if you need to reset Slate to backend state after e.g. save is completed or you get a new version etc... the React key might be a good solution

Or if you need to initialize the editor again when changing the active item etc.

This is the API for "imperative operations" for the Slate, it doesn't look like there is way to set the value where either: https://docs.slatejs.org/libraries/slate-react/react-editor So maybe react key is good choice. Depends on when do you need to force the Slate to use teh new value,

Thanks for your information. I will check how react keys works and what is the best solution for my scenario. Thanks a lot.

For example, if you have Slate on a edit product page, and you directly navigate from product a to product b, if you don't have React key anywhere same Slate component would be reused for product b page. But you could have key on the product page, something like ^{:key product-id} [product-page] a new product-page component instance is created when the id changes, and a new instance for any components are created for anything inside that page.

So the key ca be important to handle any stateful components.

https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key