react changelog

Here's the latest scoop on what's been cooking in our code kitchen! We've got some sizzling new features, spicy improvements, and a few bug fixes that are all set to make your development experience smoother and more delightful. Let's dive into the details! 🌟

New Features

  • Profiler Tab Gets a Makeover: The Profiler tab in DevTools now shows the names of changed hooks! With the new HookChangeSummary component, you can toggle between compact tooltips and detailed views to see what's cooking with your hooks. This nifty feature respects your settings and shares hook name data across tabs for a seamless experience. 🎉

  • MCP Server Debugging Made Easy: Introducing an inspection script for the MCP server! Now you can inspect and debug with ease using the yarn workspace react-mcp-server dev command, launching the inspector at http://127.0.0.1:6274. This addition streamlines the development workflow, making it a breeze to keep an eye on the server. 🔍

  • React MCP Server Initialization: We've initiated a playful experiment with a new React MCP server, featuring one assistant prompt and two capabilities. It's all in the spirit of fun, so stay tuned for what this might evolve into! 🎈

Improvements

  • Prompt Refinement for MCP: The React expert assistant within the MCP server now has a more structured prompt, guiding you on best practices for writing efficient React code. It's all about making your code sleek, optimized, and ready for concurrency. 🚀

  • Node.js Upgrade: We've upgraded to Node.js 20 LTS, ensuring compatibility with the latest features and security updates. This change keeps our project robust and future-proof. ⬆️

  • Bailout Message Clarity: Bailout messages in the MCP server now emit even without a specific location, improving error reporting and making debugging a tad less mysterious. 🕵️‍♂️

Bugfixes

  • Correcting Bailout Locations: Fixed an issue where bailout messages were showing [Object:object] instead of actual line numbers. Now, error messages are clear and accurate, helping you pinpoint issues quickly. 🛠️

  • Offscreen Hydration Bug Squashed: Resolved a bug where hidden Offscreen components were triggering hydration errors. The logic has been moved to the Activity boundary, ensuring smooth sailing during SSR. 🌊

  • GitHub Actions Workflow Fix: Addressed a bug in the check_access job, ensuring it correctly checks user access status in our CI/CD processes. It's all about keeping things running smoothly! ⚙️

  • Efficient PR Labeling: PRs now get labeled only when they're first opened, not on every update. This change makes the workflow more efficient and less cluttered. 🏷️

That's all for now, folks! Keep coding, keep creating, and stay awesome! 💻✨

Included Commits

2025-04-14T16:52:02 See commit

The commit titled "Upgrade node.js to 20 LTS" focuses on updating the project's Node.js version to the latest Long Term Support (LTS) release, specifically version 20.19.0. This upgrade is part of an ongoing effort to ensure the project remains compatible with the latest features and security updates provided by Node.js. The changes include modifications to the .nvmrc file, which specifies the version of Node.js to be used, and updates to the yarn.lock file to reflect changes in dependencies that may have been affected by the Node.js version upgrade.

In addition to the version change, the commit also includes various dependency updates within the yarn.lock file, which entails the addition and removal of specific package versions. These adjustments help maintain the integrity and functionality of the project while leveraging improvements in the Node.js ecosystem. Overall, this commit enhances the project's stability and performance by aligning it with the latest LTS version of Node.js.

Files changed

  • .nvmrc
  • fixtures/flight/yarn.lock
2025-04-14T22:39:00 See commit

This commit introduces the initialization of a new React MCP (Multi-Channel Processing) server as a playful experiment, with no major plans associated with it. The server features one assistant prompt and two capabilities, suggesting a focus on basic functionality rather than extensive features at this stage.

Several files have been added to support the new server, including a package.json for dependency management, a README.md for documentation, and several TypeScript files for the implementation of the server's core functionalities and utilities. Additionally, a todo.md file has been included, likely outlining future improvements or features to consider. The commit also modifies the existing yarn.lock file to accommodate the new package.

Files changed

  • compiler/packages/react-mcp-server/README.md
  • compiler/packages/react-mcp-server/package.json
  • compiler/packages/react-mcp-server/src/compiler/index.ts
  • compiler/packages/react-mcp-server/src/index.ts
  • compiler/packages/react-mcp-server/src/types/algolia.ts
  • compiler/packages/react-mcp-server/src/utils/algolia.ts
  • compiler/packages/react-mcp-server/todo.md
  • compiler/packages/react-mcp-server/tsconfig.json
  • compiler/packages/react-mcp-server/tsup.config.ts
  • compiler/yarn.lock
2025-04-15T10:10:00 See commit

This commit introduces a new feature in the React DevTools Profiler tab that displays the names of changed hooks, significantly enhancing the user experience by allowing developers to easily identify specific updates. A new HookChangeSummary component has been added, which presents these hook names with a toggleable displayMode prop that can switch between a concise tooltip view and a more detailed breakdown. This update also respects existing settings for parsing hook names and utilizes a caching mechanism to improve efficiency when displaying hook data.

Additionally, the InspectedElementContext has been repositioned within the component tree to facilitate shared access between the Profiler and Components tabs, preventing data duplication. A helper function, getAlreadyLoadedHookNames, has been implemented to streamline access to cached hook names, further enhancing performance. Overall, these changes not only clarify what hooks have changed during profiling but also improve the overall functionality and usability of the DevTools.

Files changed

  • packages/react-devtools-shared/src/devtools/views/Components/Components.js
  • packages/react-devtools-shared/src/devtools/views/DevTools.js
  • packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.css
  • packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js
  • packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
  • packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
  • packages/react-devtools-shared/src/hookNamesCache.js
2025-04-15T21:43:42 See commit

This commit addresses a bug related to the hydration of Offscreen components in a hidden state. It was discovered that attempting to hydrate an Offscreen boundary while it is hidden leads to hydration errors because there is no content available to hydrate. These errors are suppressed by the Offscreen boundary itself, resulting in it not being prewarmed. The issue arises particularly when hydrating at the Offscreen priority within Suspense boundaries, as it tries to hydrate against an empty set.

To resolve this, the author has moved the hydration logic to the Activity boundary in a subsequent pull request, as the server-side rendering (SSR) is responsible for determining what should be rendered or hidden, and it operates solely within the context of Activity. The changes include modifications to the ReactDOMServerPartialHydration tests and adjustments in the React reconciler to ensure that hidden content is not hydrated during SSR, deferring this to client-rendered Offscreen components.

Files changed

  • packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
2025-04-16T21:39:24 See commit

This commit addresses a bug in the GitHub Actions workflows related to the check_access job across multiple workflow files. The change specifically modifies the output variable for determining if a user is a member or collaborator. Previously, the output was incorrectly referenced as steps.check_access.outputs.result, which has now been corrected to steps.check_access.outputs.is_member_or_collaborator.

The updates were made in three workflow files: compiler_discord_notify.yml, runtime_discord_notify.yml, and shared_label_core_team_prs.yml. Each of these files now correctly outputs the intended value, ensuring that the workflows properly check and report user access status. This fix enhances the reliability of access checks within the CI/CD processes.

Files changed

  • .github/workflows/compiler_discord_notify.yml
  • .github/workflows/runtime_discord_notify.yml
  • .github/workflows/shared_label_core_team_prs.yml
2025-04-16T21:48:38 See commit

This commit introduces an inspection script for the MCP (Model Context Protocol) server, enhancing the debugging capabilities of the development environment. By utilizing the inspector from the Model Context Protocol repository, developers can now easily inspect and debug the server while it runs in watch mode. The command yarn workspace react-mcp-server dev is provided to build the server and launch the inspector, which can be accessed at the default address of http://127.0.0.1:6274.

Additionally, the commit modifies the package.json file for the react-mcp-server package, adding two new scripts: "dev" and "inspect." The "dev" script orchestrates the build and inspection processes concurrently, ensuring that both tasks run smoothly without interference. This enhancement aims to streamline the development workflow, making it easier for developers to monitor and troubleshoot the MCP server effectively.

Files changed

  • compiler/packages/react-mcp-server/package.json
2025-04-16T21:49:15 See commit

This commit addresses an issue in the React Compiler's error reporting by correcting the way location line numbers are displayed in bailout messages. Previously, the error messages included an incorrect format that referenced [Object:object], which could lead to confusion for developers trying to debug their code. The update ensures that the line numbers are presented in a clear and accurate format, specifically by using err.loc.start.line and err.loc.end.line instead of the erroneous reference.

The change was made in the index.ts file within the react-mcp-server package, resulting in a minor modification with one line added and one line removed. This fix enhances the clarity of error messages, making it easier for developers to identify the source of issues when the React Compiler encounters a bailout situation.

Files changed

  • compiler/packages/react-mcp-server/src/index.ts
2025-04-16T21:49:25 See commit

This commit, titled "Iterate on prompt," focuses on refining the prompt for a React expert assistant within the React Compiler (MCP) server. The main changes include a restructured prompt that emphasizes best practices for writing efficient and optimizable React code. The assistant now provides detailed guidelines on using functional components with Hooks, maintaining pure component rendering, respecting one-way data flow, and optimizing for concurrency. Additionally, it stresses the importance of leveraging the React Compiler's capabilities to handle optimizations automatically, thereby simplifying the codebase.

The commit also updates the resources and tools available to the assistant, allowing it to reference documentation more effectively and utilize the React Compiler for code verification. Overall, these modifications aim to enhance the assistant's ability to guide users in writing high-performance React applications while adhering to modern development standards and practices.

Files changed

  • compiler/packages/react-mcp-server/src/index.ts
2025-04-16T22:01:55 See commit

This commit modifies the GitHub Actions workflow for labeling pull requests (PRs) by ensuring that labels are only applied when a PR is first opened, rather than on every update. The change is reflected in the .github/workflows/shared_label_core_team_prs.yml file, where the event trigger for labeling has been adjusted to only include the "opened" type.

By implementing this change, the workflow becomes more efficient, reducing unnecessary labeling actions and focusing on the initial state of the PR. This helps streamline the process for core team PRs, making it clearer when a PR is labeled for review.

Files changed

  • .github/workflows/shared_label_core_team_prs.yml
2025-04-17T17:11:55 See commit

This commit modifies the error handling mechanism in the React MCP (Multi-Channel Processing) server by ensuring that bailout messages are emitted even when they do not contain a location (loc). The changes involve updating the type definition for the errors array to allow for loc to be either a SourceLocation or null. This adjustment accommodates scenarios where a bailout may be synthetic and lacks a specific location, thereby enhancing the robustness of error reporting.

The implementation simplifies the logic for pushing errors into the errors array by removing the conditional check for loc being non-null. Instead, all errors are now pushed regardless of the presence of a location. When generating the error messages for output, the code checks the type of loc to format the message accordingly, ensuring that it clearly indicates when a specific line number is not available. This change improves the clarity and completeness of the error messages generated by the React Compiler.

Files changed

  • compiler/packages/react-mcp-server/src/index.ts