Estoy desarrollando una aplicación de escritura para mi panel de administración y tiene un estado multilingüe... por lo que cada cuadro de entrada se ve así:

 <input type='text' name='title' placeholder='title' onInput={ e => setPostState({ ...postState, [lang]: { ...postState[lang], title: e.target.value } }) } value={ postState[lang].title } />

Funciona perfectamente, puedo escribir lo que sea, y si cambio de idioma cambia el valor, el valor se sincroniza con el estado y no hay problema con el cursor... hasta que llego a una entrada div editable de contenido personalizado (que actúa como un editor de HTML , completo con resaltado de sintaxis):

 <Editor editorRef={ Ref.editor } onInput={ txt => ... } value=... />

Mi editor maneja la entrada con esta función:

 const handleInput = e => { const { current: editor } = editorRef; onInput(editor.textContent); doHighlight(editor); e.preventDefault(); }

y actualiza su contenido de texto en función de su valor aquí:

 useEffect(() => { if (value) editorRef.current.textContent = value; }, [ value ]);

El problema es que la recarga de estado desde el value activa el componente para renderizar... lo que restablece el cursor. ¿Por qué esto no es un problema en un componente de input normal y cómo puedo emular este comportamiento en un div ?