In the document/README, it says the type of container returned from useCodeMirror is:
container: HTMLDivElement | null | undefined;
However, in the latest version (v4.19.9), the actual type that is exported from the npm package is:
container: HTMLDivElement | undefined;
I checked the source code, and I believe the type in document is right.
The source code
// https://github.com/uiwjs/react-codemirror/blob/6968faf74121748c629ab9487d5172beec9de42e/core/src/useCodeMirror.ts#L150
useEffect(() => setContainer(props.container!), [props.container]);
- In the first render, the value of
props.container is actually null which is the initial value of the ref editor in ReactCodeMirror.
This change triggers a second render, because the new value null is different from the current value undefined.
- Then in the second render, it can get the
HTMLDivElement and pass it to container again, triggering a third render.
- In the third render, the
container finally becomes HTMLDivElement.
During the whole process, the container value is actually undefined -> null -> HTMLDivElement.
In the document/README, it says the type of container returned from
useCodeMirroris:However, in the latest version (v4.19.9), the actual type that is exported from the npm package is:
I checked the source code, and I believe the type in document is right.
The source code
props.containeris actuallynullwhich is the initial value of the refeditorinReactCodeMirror.This change triggers a second render, because the new value
nullis different from the current valueundefined.HTMLDivElementand pass it tocontaineragain, triggering a third render.containerfinally becomesHTMLDivElement.During the whole process, the
containervalue is actuallyundefined->null->HTMLDivElement.