Fix React render-phase update warning in Course Settings sidebar - #8041
Merged
Merged
Conversation
SenseiSettingsDocumentSidebar dispatched openGeneralSidebar and toggleEditorPanelOpened directly in its render body, triggering React's "Cannot update a component while rendering a different component" warning on ComplementaryAreaToggle. Wrap the dispatches in useEffect so they run after commit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes a React render-phase update warning triggered when opening the Sensei Course Settings sidebar in the WordPress course editor by moving store-dispatch side effects out of the render body and into a useEffect hook.
Changes:
- Move
openGeneralSidebar/toggleEditorPanelOpeneddispatches into auseEffectkeyed onisSenseiEditorPanelOpento avoid render-phase updates. - Add a changelog entry documenting the fix.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| changelog/fix-course-settings-render-phase-dispatch | Adds a patch-level “fixed” changelog entry for the React warning. |
| assets/js/admin/course-settings-plugin-sidebar.js | Wraps sidebar/panel dispatch logic in useEffect to prevent render-phase updates under React 18 dev builds. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
WordPress Playground PreviewThe changes in this pull request can previewed and tested using a WordPress Playground instance. 
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Opening Course Settings in the course editor logs a React dev-mode warning:
SenseiSettingsDocumentSidebardispatchedopenGeneralSidebarandtoggleEditorPanelOpeneddirectly in its render body. Triggering store updates during render is a render-phase update, which React warns about (and can cause double-renders / stale state).The bad pattern has existed since 2022; it only surfaced as a visible warning once WordPress core bundled React 18 (WP 6.2+) and the dev React build was loaded (
SCRIPT_DEBUG).Fix
Wrap the dispatch side-effects in
useEffect, keyed onisSenseiEditorPanelOpen, so they run after commit instead of during render. Behavior is unchanged — clicking "Course Settings" still opens the plugin sidebar and closes the document panel.Also
Document the existing PR-milestone CI requirement in
AGENTS.md(it was previously only in.github/), including the REST-API fallback for assigning milestones.Test plan
SCRIPT_DEBUGon, dev React loaded.🤖 Generated with Claude Code