useSlate acts as useSlateStatic and returns the same editor even after a change in the editor

[akonsu]

Create a new component and embed it inside <Slate>:

...
const MyTest = props => {
    const editor = useSlate();

    useEffect(() => {
        console.log(editor);
    }, [editor]);

    return <div {...props} />;
};
...
return (
    <Slate ... >
        <MyTest />
        <Editable ... />
    </Slate>
);

Observe that the console output appears only once when the page is loaded, but not after there is a change in the editor.

My debugging: The Slate context (https://github.com/ianstormtaylor/slate/blob/11ef83b47fca84d1f908b5c9eeefada516fe9fed/packages/slate-react/src/hooks/use-slate.tsx#L10) is correctly updated with a new array at https://github.com/ianstormtaylor/slate/blob/11ef83b47fca84d1f908b5c9eeefada516fe9fed/packages/slate-react/src/components/slate.tsx#L42 But this array contains the same editor object as before the change. So when useSlate deconstructs the array from the context and returns its first element, the same object is returned (https://github.com/ianstormtaylor/slate/blob/11ef83b47fca84d1f908b5c9eeefada516fe9fed/packages/slate-react/src/hooks/use-slate.tsx#L25).

[vjee]

Running into the same issue.

[akonsu]

@vjee to work around this, for my purposes, I was able to use editor.selection in the list of dependencies of my useEffect to make it fire when there is a change.

[vjee]

@akonsu Thanks for sharing! That looks like a good workaround indeed. I stumbled upon this while testing out some stuff but I don't need the effect anymore. I should however start using useSlateStaticeverywhere instead of useSlate in case this issue gets fixed :)

[ivadenis]

same issue