SPFx 1.24 Preview: Toolchain, React 18 Migration and Copilot UX Readiness

SPFx 1.24 preview deserves a controlled evaluation because it changes the React baseline and introduces Copilot UX components. Existing web parts need lifecycle and dependency testing; new projects need a deliberate choice between released tooling and experimental capabilities.

Research checked: 9 October 2026. This article updates our August roadmap coverage in place. The original publication date and URL are preserved. Recommendations below are engineering guidance, separated from Microsoft's release commitments.

Release status: rc.0 is available; GA is not confirmed

The release notes list rc.0 released on 2 October 2026 and retain a pre-release warning. Microsoft's npm generator resolves next to 1.24.0-rc.0 and latest to 1.23.2. No later 1.24 patch was found in the checked generator metadata.

The 30 September roadmap targets October GA. That is a plan, not evidence of shipment. The compatibility matrix currently ends at 1.23.2. Treat 1.24 as an RC evaluation; do not describe it as production-ready merely because the target month has arrived.

Supported toolchain: separate guidance from package evidence

There is no published final 1.24 support row to quote. The table therefore distinguishes released guidance from dependencies observed in Microsoft's published RC generator. Check its versioned package metadata and packaged lib/common/dependencies.json; keep a lockfile for the combination you actually test.

On smaller screens, scroll this table horizontally to compare all four columns.

The release notes discuss Node 24/26, while the stable setup page recommends Node 22 and the matrix omits 1.24. Package engines verify RC install constraints; the matrix and final release guidance remain the support authority. The CLI page describes replacing Yeoman, but the September roadmap places CLI GA in 1.25. Its documentation is explicitly pre-release: do not silently replace production scaffolding.

React 18 migration: follow the SPFx host lifecycle

Compare your implementation with the versioned RC generator's React web-part template, not a generic single-page React tutorial. The template creates one root against this.domElement, reuses it during render(), and unmounts it in onDispose(). Its Copilot component instead uses this.context.domElement and onTeardown(). Those lifecycle boundaries are not interchangeable.

The React 18 upgrade guide explains root APIs, automatic batching and stricter development checks. Expect tests that assume synchronous state updates to need review. Strict Mode can expose missing cleanup in development when enabled; do not claim that every SPFx host automatically enables it.

• Effects: clean up subscriptions, timers and listeners. Ignore or cancel late requests when a component is disposed.
• Typings: check explicit children props, refs, event signatures and duplicate React type packages.
• Libraries: inspect peer dependencies for charts, editors, grids and shared controls; test actual interactions before accepting a successful install.
• Fluent UI: the RC generator uses @fluentui/react ^8.106.4. That is not a mandate to move to v9. Microsoft's Fluent UI guidance recommends scoped styles to avoid global CSS conflicts.
• Bundling: inspect externals, duplicated React and custom Webpack hooks. For older projects, migrating gulp customizations to the Heft toolchain is a separate workstream.

No comprehensive 1.24-specific third-party incompatibility list was found in the checked Microsoft guidance. Maintain your own dependency test matrix; do not label a library incompatible without evidence.

Copilot UX components: preview capability and deployment

These components display interactive forms, charts or approvals inside the Microsoft 365 Copilot canvas. Microsoft's overview limits current preview rendering to that experience. Shared UI across SharePoint and Teams is architectural reuse and future direction, not confirmation that this preview component host works everywhere.

The tutorial packages the UI and declarative agent in an .sppkg. Upload it to the SharePoint App Catalog, enable tenant-wide deployment as documented, then use Add to Teams to sync the agent to the tenant agent catalog. That button name does not prove Copilot UX rendering in Teams. Private tenant deployment is available; marketplace distribution is not supported in preview.

Authentication does not remove authorization. Follow the data-access guide for SPHttpClient, MSGraphClientV3 and API permission requests. Verify administrator approval and the signed-in user's access separately. Validate agent-supplied parameters, handle 401/403 responses, and keep secrets out of browser bundles.

Licensing and production gates

The component overview says no Microsoft 365 Copilot license is required to build, deploy or run during preview. The September roadmap also states no preview consumption-based costs. GA licensing remains unconfirmed. Do not promise a free production service from those temporary terms.

Microsoft's broader Copilot licensing guidance describes subscription and usage-based billing, but does not settle this component's GA entitlement. Before committing, ask for the applicable SKU, user entitlement, component consumption model and costs of any backend services. Record tenant eligibility and budget ownership. The overview explicitly says not to use these preview components in production.

Upgrade checklist for existing solutions

1. Inventory: record SPFx packages, React, typings, Fluent UI, PnPjs, extensions, custom loaders and supported hosts.
2. Isolate: create an upgrade branch and keep the released package available for rollback.
3. Pin: select the reviewed runtime and generator; capture Node and npm versions in CI.
4. Compare: scaffold a clean RC project and review its configuration beside your project.
5. Resolve: update incompatible libraries and migrate custom tasks deliberately.
6. Review: inspect package and lockfile changes, then prove a clean reproducible install.
7. Package: build production-mode artifacts and check the generated solution metadata.
8. Deploy to development: verify catalog deployment and every requested permission.
9. Pilot: validate representative users and rollback before proposing wider rollout after GA gates are met.

Microsoft's upgrade guidance recommends checking outdated packages and release-specific changes. Do not upgrade every package to its newest version indiscriminately.

# Isolated evaluation; no production solution is upgraded by these commands
npm install --global @microsoft/generator-sharepoint@1.24.0-rc.0
yo @microsoft/sharepoint
# Inside the new Heft-based project
heft build --production
heft package-solution --production

The build/package commands follow Microsoft's Copilot component tutorial. Use your generated project's scripts and supported configuration; legacy gulp commands are not interchangeable with Heft.

Validation scenarios that catch upgrade regressions

The troubleshooting guide distinguishes Workbench failures from agent/deployment problems. A working local view is not proof that the synced agent calls the current tool definition.

Release notes record beta.5 rolling back beta.4 tool-resolution changes, rc.0 reintroducing dynamic tool recovery, and a Sass package-import fix for issue #11030. Retest those areas if your solution encountered them. No deprecations are listed there; that does not guarantee zero behavioral changes.

Recommendation by project type

• New production projects: use the released baseline supported by current Microsoft guidance; plan a later 1.24 upgrade.
• Existing production solutions: run the isolated compatibility assessment now. Require GA support, regression evidence and rollback before promotion.
• Copilot UX prototypes: evaluate rc.0 in a development tenant, record preview assumptions and revisit host support and licensing before production.

Continue with our SPFx React developer guide or SPFx development services. Verify Microsoft sources again when your rollout date changes.

Contact

Need help upgrading your SharePoint solutions or assessing SPFx compatibility? Contact NextM365 at suresh@nextM365.com.