Warning: Cannot update a component (Slate) while rendering a different component (ForwardRef) in onKeyDown handler when DevTools is open

[MaxVhanamane]

Description

I have added a command palette feature that opens when the user types / in the editor, but I see an error in the console when the command palette opens.

Warning: Cannot update a component (`Slate`) while rendering a different component (`ForwardRef`). To locate the bad setState() call inside `ForwardRef`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Here is a minimal code example:

const {
    openCommandPalette,
  } = useCommandPalette(editor, expandEditorToMaxHeight);

// This is how openCommandPalette function looks like:

  const openCommandPalette = useCallback(() => {
    if (editor.selection && Range.isCollapsed(editor.selection)) {
      const [start] = Range.edges(editor.selection);
      setCommandPalettePosition({ anchor: start, focus: start });
      setShowCommandPalette(true);
      setSelectedIndex(0);
      lastCommandRef.current = "";
    }
  }, []);


const onKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
 if (
      event.key === "/" &&
      !isInsideCodeBlock(editor) &&
      !showCommandPalette
    ) {
      openCommandPalette();
    }
}

     <Editable
          readOnly={!isEditorExpanded && mode !== "edit" ? true : false}
          renderElement={renderElement}
          decorate={decorate}
          renderLeaf={renderLeaf}
          onDOMBeforeInput={handleOnDOMBeforeInput}
          onKeyDown={onKeyDownHandler}
          scrollSelectionIntoView={handleScrollSelectionIntoView}
          className="focus-visible:outline-none flex-1 [&>*]:py-[3px] py-4 [&>*:nth-child(2)]:mt-1 break-words whitespace-pre-wrap"
          tabIndex={!isEditorExpanded && mode !== "edit" ? -1 : 0}
        />

Investigation:

I know that openCommandPalette() is causing this warning because wrapping it in a setTimeout fixes the problem. However, I have to use a large delay (e.g., 500ms); it does not work with 0ms:

const onKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>) => {
 if (
      event.key === "/" &&
      !isInsideCodeBlock(editor) &&
      !showCommandPalette
    ) {
      setTimeout(()=>{
openCommandPalette();
      },500)
    }
}

I’ve also tried using:

1. React.startTransition
2. queueMicrotask
3. requestAnimationFrame

All of these still produce the same warning. Only setTimeout with a larger delay avoids it.

Additional observations:

1. The warning only appears when browser DevTools is open (e.g., Chrome DevTools), likely due to performance overhead.
2. The error occurs only once. For example, if I clear the console and type / again, I don’t see the warning.

Question:

What is causing this warning, and how can I fix it without relying on a long setTimeout?

Environment:

"slate": "^0.114.0",
"slate-dom": "^0.114.0",
"slate-history": "^0.113.1",
"slate-react": "^0.114.2",

Top.-level.deck.cards.-.Google.Chrome.2025-10-16.01-28-13.mp4

[12joan]

Can you try to create a minimal reproduction in a code sandbox? Without that, it's hard to do anything except guess at possible causes and suggest debugging strategies.

Unless there's a bug in React itself, I don't think it's possible for the openCommandPalette call by itself to trigger this error. The onKeyDown prop is called synchronously in response to the HTML keydown event, which can't occur while React is rendering a component. Similarly, setTimeout timers can't fire during rendering.

Therefore, we must conclude that some indirect consequence of calling openCommandPalette is resulting in the state update during a render. The buggy code is most likely to be inside the useCommandPalette hook, or perhaps in the command palette component itself. (That last possibility might explain the ForwardRef component mentioned in the error message.)

I'm not sure why a setTimeout with a long duration prevents the error from happening. It might be a race condition between the buggy code and some other asynchronous process. For example, Slate's Editable component has an internal onDOMSelectionChange callback that's throttled to 100ms, which might be interacting with your code in some way.

If neither the useCommandPalette hook nor the component are at fault, the problem might be caused by the component that calls useCommandPalette re-rendering. One of the hooks you're passing to Editable might be an unmemoised function or object that's triggering buggy behaviour that results in a state update during a render.

The best way of identifying the root cause would probably be to locate the state setter using your web inspector's debugger. Adding a breakpoint on the line in React's internal code that throws the Warning: Cannot update a component... error and following the stack trace upwards would probably work for that.

[MaxVhanamane]

@12joan Alright, so I’ve modified the code I shared earlier to give you a better understanding of what’s happening. Please take another look at it.

Here’s what I understand from the error stack trace and from experimenting with my own code:

When I hit "/", the Editable component is still rendering (the ForwardRef component mentioned in the error message is actually the Editable component. I’ve seen it in the repo). That component is in the middle of rendering when I call openCommandPalette().

The openCommandPalette() function updates the state, which causes the RichTextEditor component to re-render, since it depends on the showCommandPalette, commandPalettePosition, and state values.

Because of this, React complains the RichTextEditor Component is the parent, and Editable is the child component that’s in the middle of rendering when I update the parent’s state.

However, there’s one thing I don’t understand: I’m doing all of this inside an onKeyDown event, so it shouldn’t be causing this issue.

The most important thing is that this only happens when I have DevTools open.
If I use the app in full screen without DevTools, the error never occurs.

When I use the app in full screen, I don’t even need to add a setTimeout with a large delay , I can just call it directly, and I don’t see any errors at all.

 if (
  event.key === "/" &&
  !isInsideCodeBlock(editor) &&
  !showCommandPalette
) {
  openCommandPalette();
}

What I think is happening is that when DevTools is open, the Editable component takes a little longer to render. During that time, the onKeyDown handler runs and updates the state in the middle of the render. I’m not completely sure, but that might be the case.

I can update normal React state values inside the onKeyDown handler of the Editable component, right?

Here, you can see that the Editable component is wrapped in a forwardRef, so I’m sure the error message referring to the ForwardRef component is actually pointing to the Editable component.

ForwardRef component

I tried commenting out the code related to the actual command palette that appears when I hit the slash (/) key, and the problem is not in that component. I still get same error.

/* {showCommandPalette && commandPalettePosition && (
        <CommandPalette
          target={commandPalettePosition}
          closeCommandPalette={closeCommandPalette}
          selectedIndex={selectedIndex}
          filteredCommands={filteredCommands}
          setSelectedIndex={setSelectedIndex}
          setIsUsingArrowKeys={setIsUsingArrowKeys}
          isUsingArrowKeys={isUsingArrowKeys}
          commandSearch={commandSearch}
          highLightConfig={highLightConfig}
          setHighlightConfig={setHighlightConfig}
          activeSubmenuId={activeSubmenuId}
          hasSubmenu={hasSubmenu}
          toggleSubmenu={toggleSubmenu}
          mode={mode}
        />
      )} */

Here’s the video I recorded after commenting out the actual command palette component.
In this case, I only call openCommandPalette() and update the state. I’m not showing the actual command palette.

You can see that when DevTools is open, I get the error once. After that, even when DevTools remains open, pressing / again doesn’t trigger the error. It only occurs once during the first time when DevTools is open.

Later in the video, you can also see that when I reload the page and use the app in full screen, pressing / doesn’t cause any error at all.
This is so annoying.

Level.decks.mp4

The fact that using setTimeout with a large delay fixes the error suggests that Editable fully renders first, then React is free to update the state, which is why the error doesn’t occur in that case.

The onKeyDown function runs once the Editable component completes rendering, right?

I think replicating this bug in the sandbox is difficult, as it seems to be a timing issue that occurs when your browser is working hard or running slowly.

[MaxVhanamane]

@12joan And here’s one more thing: I just tested this. I closed the current Chrome window as you can see in the old videos, I have too many tabs open but with Tab Suspenders, I don’t see any lag using Chrome, even with all the tabs open.

But in this test, I opened a new session with only one tab, and I don’t see any errors at all when DevTools is open. What is going on?

I am using these ReactJs versions

"react": "^18.2.0",
"react-dom": "^18.2.0",

Lv2.mp4

[12joan]

I took a look at the code for React 18.2.0 to see when the Cannot update a component message can arise. It looks like this can only happen if the RenderContext bit is set on React's global executionContext variable. The RenderContext bit is set to true at the start of renderRootSync and renderRootConcurrent, and it's unconditionally reset to its prior value towards the end of both of those functions.

Despite the word "concurrent", both of these are fully synchronous functions, and barring an exception being thrown between setting and unsetting the RenderContext bit, there's no way the bit can be true any time except while that function is running. Since this is running in the main thread, it's impossible for the browser to call any event handlers such as keydown while this function is running. I assume the same is true for React's synthetic onKeyDown handler, but you could double-check this by refactoring your code to use addEventListener instead.

For this reason, I don't think it's possible for Editable to still be rendering when openCommandPalette is called. I still think it's much more likely that the render caused by openCommandPalette is itself resulting in a secondary state change during some render function.

Can you try to locate this secondary state change using your debugger in the manner I described above? It looks like the state setter should be an ancestor of React's warnAboutRenderPhaseUpdatesInDEV in the call stack, so this should be easy to find.

If it does turn out to be openCommandPalette itself, this is definitely a bug in React (or possibly the dev tools), and the only thing I can suggest is to upgrade to the latest version of React and report a bug to them if it's still present.

[MaxVhanamane]

@12joan Ok, so I think I found the issue. As you suggested, I went to look for warnAboutRenderPhaseUpdatesInDEV in the Sources tab in the browser. But before that, I checked what code my browser was actually using for this operation:

if (
  event.key === "/" &&
  !isInsideCodeBlock(editor) &&
  !showCommandPalette
) {
  requestAnimationFrame(() => {
    openCommandPalette();
  });
  return;
}

You can see that I was using requestAnimationFrame here. I initially added this code to try to fix an issue where the decoration was slightly delayed (I’ve attached a video showing the delay). Later, I removed the requestAnimationFrame wrapper. However, due to browser caching or HMR issue, the old code kept being used.

After clearing the cache, I am now using this code without requestAnimationFrame:

if (
  event.key === "/" &&
  !isInsideCodeBlock(editor) &&
  !showCommandPalette
) {
  openCommandPalette();
  return;
}

Now it works without throwing any errors, even with multiple tabs open in the browser.

As you suggested, I also tried using addEventListener, when I call the openCommandPalette in requestAnimationFrame I get the error.

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === "/") {
      requestAnimationFrame(() => {
        openCommandPalette();
      });
    }
  };
  window.addEventListener("keydown", handleKeyDown);
  return () => window.removeEventListener("keydown", handleKeyDown);
}, [openCommandPalette]);

When I remove the requestAnimationFrame, the error doesn’t occur:

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    console.log("useEffect ran");
    if (e.key === "/") {
      openCommandPalette();
    }
  };
  window.addEventListener("keydown", handleKeyDown);
  return () => window.removeEventListener("keydown", handleKeyDown);
}, [openCommandPalette]);

One more observation: whether you use requestAnimationFrame or not, in a clean browser with a single tab open and no other overhead, you never see that error.

I always thought that requestAnimationFrame runs before paint, React has already performed all rendering work, but somehow this is causing a conflict.

Here is the video as you can see when I use rAF the error occurs and when I remove the error doesn't occure

rAF.mp4

For now, cannot update a component (Slate) while rendering a different component issue is resolved.

However, I still have another problem: the decoration appears with a slight delay. For example, when I type /, it should decorate instantly, but there’s a noticeable delay (shown in the video). How can I fix that? The delayed decoration makes it look laggy.
I saw plateJs example but they don't decorate that part.

delay.mp4

here is my decoration related code

 const useDecorate = (editor: Editor) => {
    return useCallback(
      ([node, path]: NodeEntry) => {
        const ranges: any[] = [];

        // First decorator logic (handling the command palette matching)
        if (Text.isText(node) && showCommandPalette && commandPalettePosition) {
          // Match slash commands anywhere in the text
          const regex = /\/[^\s]*/g;
          let match;

          while ((match = regex.exec(node.text)) !== null) {
            const start = match.index;
            const end = start + match[0].length;

            const matchRange = {
              anchor: { path, offset: start },
              focus: { path, offset: end },
            };

            // Only decorate if it's the same path and range as commandPalettePosition
            if (
              Path.equals(path, commandPalettePosition.anchor.path) &&
              Point.equals(matchRange.anchor, commandPalettePosition.anchor)
            ) {
              ranges.push({
                ...matchRange,
                isSlashCommand: true,
                text: match[0],
              });
            }
          }
        }

        // Second decorator logic (handling the code-line decorations)
        if (SlateElement.isElement(node) && node.type === "code-line") {
          const codeLineRanges = editor.nodeToDecorations?.get(node) || [];
          ranges.push(...codeLineRanges); // Add code-line specific ranges to the final ranges
        }

        return ranges;
      },
      [showCommandPalette, commandPalettePosition, editor.nodeToDecorations]
    );
  };

  const decorate = useDecorate(editor);
 <Editable
          readOnly={!isEditorExpanded && mode !== "edit" ? true : false}
          renderElement={renderElement}
          decorate={decorate}
          renderLeaf={renderLeaf}
          onDOMBeforeInput={handleOnDOMBeforeInput}
          onKeyDown={onKeyDownHandler}
          scrollSelectionIntoView={handleScrollSelectionIntoView}
          className="focus-visible:outline-none flex-1 [&>*]:py-[3px] py-4 [&>*:nth-child(2)]:mt-1 break-words whitespace-pre-wrap"
          tabIndex={!isEditorExpanded && mode !== "edit" ? -1 : 0}
        />

Lastly, I have a question: can I update state inside the onDOMBeforeInput prop provided by the Editable component?

[12joan]

I'm glad you were able to get that issue resolved. I'm afraid I don't know why there's a delay before the decoration appears.

can I update state inside the onDOMBeforeInput prop provided by the Editable component?

Yes, you should be able to update state at any time except synchronously during a render function (and even then there are cases where this is not only acceptable, but encouraged, as I just learned today). I've still got no idea why requestAnimationFrame would result in an exception to this.

[MaxVhanamane]

@12joan I found out why there was a delay it was because I was using the state values showCommandPalette and commandPalettePosition to decide whether to apply decorations. When the user pressed /, the slash would appear first, then the states showCommandPalette and commandPalettePosition would update, and only after that the decoration would be applied.

Now I’m using a ref instead, which updates immediately in the same render cycle, so the decoration appears correctly in time.

const useDecorate = (editor: Editor) => {
    return useCallback(
      ([node, path]: NodeEntry) => {
        const ranges: any[] = [];

        if (Text.isText(node)) {
          const regex = /\/[^\s]*/g;
          let match;
          const lastSlashLocationValue = lastSlashLocation.current;

          while ((match = regex.exec(node.text)) !== null) {
            const start = match.index;
            const end = start + match[0].length;

            const matchRange = {
              anchor: { path, offset: start },
              focus: { path, offset: end },
            };
            // Only highlight if it’s the same range as the *typed* slash
            if (
              lastSlashLocationValue &&
              Path.equals(path, lastSlashLocationValue.anchor.path) &&
              lastSlashLocationValue.anchor.offset >= start &&
              lastSlashLocationValue.anchor.offset <= end
            ) {
              ranges.push({
                ...matchRange,
                isSlashCommand: true,
              });
            }
          }
        }

        // Add other decorations (e.g. code-line)
        if (SlateElement.isElement(node) && node.type === "code-line") {
          const codeLineRanges = editor.nodeToDecorations?.get(node) || [];
          ranges.push(...codeLineRanges);
        }

        return ranges;
      },
      [editor, lastSlashLocation.current]
    );
  };

  const decorate = useDecorate(editor);

Also, I’ve noticed that using setTimeout with a 0 ms delay or requestAnimationFrame inside an onKeyDown handler can cause issues. It’s better to avoid those completely or refactor the logic so you don’t need them at all.

For example, earlier I was using this function inside onKeyDown to get the text after/so I could filter commands in the command palette.

const text = getTextAfterSlash(editor);

export const getTextAfterSlash = (editor: Editor): string | null => {
    const { selection } = editor;
    if (!selection || !Range.isCollapsed(selection)) return null;

    const cursor = selection.anchor;

    // Walk backwards to find the sequence
    let start = cursor;
    let lastSlashPosition = null;
    let slashCount = 0;

    while (true) {
        const before = Editor.before(editor, start, { unit: 'character' });
        if (!before) break;

        const charRange = Editor.range(editor, before, start);
        const char = Editor.string(editor, charRange);

        if (char === "/") {
            slashCount++;
            lastSlashPosition = before;
        } else if (char === " " || char === "\n") {
            break;
        }

        start = before;
    }

    if (slashCount === 0 || !lastSlashPosition) return null;

    // If only one slash was found, return everything after it
    if (slashCount === 1) {
        const textAfterSlashStart = Editor.after(editor, lastSlashPosition, { unit: "character" });
        if (!textAfterSlashStart) return "";

        const textRange = Editor.range(editor, textAfterSlashStart, cursor);
        return Editor.string(editor, textRange);
    }

    // For multiple slashes, skip the first one
    // Find position after the first slash
    const firstSlashPosition = Editor.before(editor, lastSlashPosition, {
        unit: 'character',
        distance: slashCount - 1
    });

    if (!firstSlashPosition) return null;

    const afterFirstSlash = Editor.after(editor, firstSlashPosition, { unit: "character" });
    if (!afterFirstSlash) return "";

    const textRange = Editor.range(editor, afterFirstSlash, cursor);
    return Editor.string(editor, textRange);
}

However, inside onKeyDown, the newly typed character isn’t yet available, for example if you type "/he"
getTextAfterSlash would return only "h".

I initially fixed that by wrapping it in a requestAnimationFrame so I could read the correct character, I never had any issues using the command palette with this approach it would filter everything correctly. Everything was working fine; it’s just that the error in the console Cannot update a component (Slate) while rendering a different component (ForwardRef) appeared occasionally.

So instead, I moved all the text-extraction logic into the <Slate>'s onChange handler, where you already have access to the updated values. That way, it works reliably without any of those hacky workarounds. I had to modify my code a bit, but it was definitely worth it.

Thanks for your help, I really appreciate the time you took to look into this issue. The problem is now resolved.