Bad performance using useState

I think the first example in the documentation has a flaw.
It uses setValue(val) in the onChange callback which means that React triggers re-rendering of the component. In my case, when using a computationally heavy SQL editor this gets slowed down so much that it even misses characters when typing.

  const [value, setValue] = React.useState("console.log('hello world!');");
  const onChange = React.useCallback((val, viewUpdate) => {
    console.log('val:', val);
    setValue(val);
  }, []);
  return <CodeMirror value={value} height="200px" extensions={[javascript({ jsx: true })]} onChange={onChange} />;

Here is the IMO correct way to do it:

  const valueRef = React.useRef("console.log('hello world!');");
  const [value, setValue] = React.useState(valueRef.current);
  const onChange = React.useCallback((val, viewUpdate) => {
    console.log('val:', val);
    valueRef.current = val; // Update ref instead of state to avoid unnessecary re-renders
  }, []);
  return <CodeMirror value={value} height="200px" extensions={[javascript({ jsx: true })]} onChange={onChange} />;

So basically use setValue(val) only when you really want to change the code in your codemirror instance and thus want React to re-render your component. If you just want to store the internal state of your codemirror instance on changes for further use in your React component you should just use refs and access the actual value via valueRef.current.

Start from the first documentation example referenced in the issue and review how its onChange callback uses setValue. Update the example or accompanying guidance to explain the re-rendering cost and when a ref is appropriate; done when the documented recommendation clearly distinguishes storing editor changes from intentionally updating the CodeMirror value.