State is uncontrolled in [email protected]

[lynxtaa]

Description
Changing state programmatically won't work in [email protected]. For example, setting value from useEffect doesn't work:

  useEffect(() => {
    let timer = setTimeout(
      () =>
        setValue([
          { type: "paragraph", children: [{ text: "Hello world!" }] },
        ]),
      5000
    );

    return function () {
      clearTimeout(timer);
    };
  }, []);

  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable renderElement={renderElement} />
    </Slate>
  );

Recording
I really hope sandbox will be sufficient for observing this behaviour.

Sandbox
https://codesandbox.io/s/slate-set-value-4fxxc?file=/src/Editor/index.js

Steps
To reproduce the behavior:

1. Go to sandbox https://codesandbox.io/s/slate-set-value-4fxxc?file=/src/Editor/index.js
2. Wait 5 sec
3. Editor won't show text Hello world. But it should
4. Set in package.json [email protected]
5. Now it works

Expectation
I expect slate state to be controlled as in [email protected]

Environment

• Slate Version: 0.70.0
• Operating System: Windows
• Browser: Firefox, Chrome

[lynxtaa]

I think it's because of #4540

If so, what is the best way right now for changing state as a whole?

[aboveyunhai]

Refer to #4612 and the PR
it can be changed directly by editor.children = value above your return statement, I changed mine to this way and it works out for general first render, but I'm not sure about the real time cooperative editing.
The approach is still questionable for me. I don't have a complex project that is able to test against the effect of this breaking change.

[lynxtaa]

@aboveyunhai Thanks! Closing as duplicate