react changelog

Hey there, awesome devs! We've got some exciting updates and fixes to share with you. Here's the latest and greatest from our changelog:

New feature: React DevTools 5.0.2 -> 5.1.0 🎉

We've upgraded React DevTools with a bunch of cool new features and improvements! Some highlights include:

• Support for a theme option in devtools-fusebox.
• Added a method for connecting the backend with a custom messaging protocol.
• Source maps for content scripts.
• Displaying the actual pending state when inspecting useTransition.
• And much more!

Bugfix: Improved <style> textContent escaping in Fizz 🛠️

We've fixed an issue where style text content was being escaped as HTML, which was a bit of a mess. Now, style text content is properly escaped to prevent early tag closure. This is done by encoding "s" and "S" as hexadecimal unicode representations within sequences like </style>. No more dangerouslySetInnerHTML shenanigans!

Bugfix: <script> textContent escaping similar to bootstrapScript 🛡️

Inline script children are now properly escaped to avoid breaking script parsing. This update extends the escaping functionality used for bootstrapScripts and importMaps to any inline script. We escape 's' or 'S' with the appropriate unicode code point if found within a <script> or </script> sequence. This ensures minimal escaping for readability while maintaining full JS parsing capabilities.

Improvement: CircleCI workflows converted to GitHub Actions 🚀

We've moved our devtools_regression_tests workflow from CircleCI to GitHub Actions. This change makes our CI process more integrated with GitHub, and we've tested it thoroughly in a forked repo to ensure everything runs smoothly.

Improvement: Promoted ASYNC_ITERATOR symbol to React Symbols 🔄

The ASYNC_ITERATOR symbol is now part of React Symbols, making it easier to refer to in multiple places within the codebase. This change streamlines the usage of ASYNC_ITERATOR and ensures consistency across the board.

Improvement: Added support for useFormStatus in DevTools 🧩

DevTools now supports the useFormStatus hook! We've added a new function useHostTransitionStatus and updated the Dispatcher object. This enhancement improves debugging capabilities by providing support for the useFormStatus hook and adding tests to ensure its correct functionality.

Bugfix: Removed renderToStaticNodeStream 🚫

We've removed the renderToStaticNodeStream method from React. You can now replicate its semantics using renderToPipeableStream with onAllReady or renderToReadableStream with await stream.allready. This change simplifies the codebase and aligns with our modern streaming implementation for SSR.

Chore: Removed ReactFlightFB bundles 🧹

We've cleaned up the project by removing the ReactFlightFB bundles. This change simplifies the project structure and eliminates unnecessary code related to these specific bundles, making the codebase more focused and easier to maintain.

That's all for now! Keep coding, stay awesome, and enjoy these updates! 🚀✨

Hey there, fellow developers! Here's a rundown of the latest and greatest changes we've made. We've packed in some awesome new features, improvements, and bug fixes to make your experience even better. Check out the details below! 🚀✨

New Features

• Fusebox Integration for DevTools: We've added a shiny new package called react-devtools-fusebox, which serves as the entry point for the React DevTools Frontend in Chrome DevTools. This package builds scripts in ESM format and includes styles in a separate .css file, ensuring everything loads smoothly. 🎉

• Custom Messaging Protocol for DevTools: The RDT backend now has a method called connectWithCustomMessagingProtocol, allowing for custom messaging protocols between the frontend and backend. This is a game-changer for non-browser RDT integrations! 🌐

• Theme Support in DevTools Fusebox: You can now propagate themes from Chrome DevTools frontend to React DevTools Fusebox. The theme field is optional, and future improvements will allow DevTools to listen to theme changes and update automatically. 🎨

• Promise as a Child Test in Flight Fixture: We've added a Promise as a child test to the Flight fixture, demonstrating the use of asynchronous behavior in UI rendering. This ensures that the Promise as a child hydrates without errors. 🔄

• Scaffolding for requestFormReset API: We've laid the groundwork for the requestFormReset API by introducing a new ReactDOM export and setting up the internal dispatcher method. Stay tuned for the full implementation! 🏗️

Improvements

• Hydration Scheduling with Event Priority: Hydration scheduling now uses real event priority instead of the reconciler's update priority when no explicit update priority is set. This change ensures more accurate and efficient hydration scheduling. 📈

• Limited Test Utils Builds: We've introduced a flag to disable test-utils in many builds and removed test-utils implementations from unsupported builds. This ensures proper functionality with tests in different build configurations. 🧪

• Shortened ReactDOMCurrentDispatcher Method Names: We've optimized method names in ReactDOMCurrentDispatcher by shortening them to align with hint codes used in Flight. This makes the code more concise and easier to understand. ✂️

Bug Fixes

• Backwards Compatibility for String Refs on WWW: We've fixed errors with undefined string ref values when syncing, ensuring smooth functioning and compatibility with string refs in React components. 🛠️

• Assertions Flushed Before act in Tests: We've fixed cases where assertions were not flushed before the act function in tests. This prevents blocking issues and improves the testing environment. ✅

• No Preloading Images Inside <noscript>: We've updated the <noscript> scope check to prevent preloading images inside <noscript> tags, addressing the issue raised in #27910. 🖼️

That's all for now! Keep coding and enjoy the new features and improvements. Happy developing! 😄👩‍💻👨‍💻

Here's the latest and greatest from our development team! 🚀

New Features

• Enable feature flags for v19: We've turned on the feature flags for version 19 (v19) in the canary channel. This update includes enabling various experimental features like enableRefAsProp, disableStringRefs, and enableBigIntSupport. Get ready to experiment! 🎉 (#28647)

Improvements

• Remove IndeterminateComponent: We've streamlined the React codebase by removing the deprecated IndeterminateComponent. Say hello to IncompleteFunctionComponent for supporting Suspense in legacy mode. This change simplifies our code and removes outdated features. 🧹 (#28681)

• Move string ref coercion to JSX runtime: The string ref implementation has been shifted from Fiber to the JSX runtime. This subtle change converts string refs to callback refs during element creation, affecting only Meta since string refs are disabled in open source. 📦 (#28473)

• Make class prop resolution faster: We've optimized class prop resolution by removing the ref prop before handling default props, eliminating the need to clone the object twice. This makes the process faster and more efficient. ⚡ (#28766)

Bugfixes

• Emit Server Error Prefix in the .stack Property Too: Fixed an issue where the prefix of a server error wasn't displayed in the console when using V8. Now, the error message will be properly displayed, improving the debugging experience. 🐛 (#28738)

• Fix: Class components should "consume" ref prop: Addressed the issue where class components did not automatically attach the class instance to the ref's current property. Now, the ref is removed from the props object before passing it to lifecycle methods, ensuring existing code doesn't break. 🛠️ (#28719)

• Hardcode enableLegacyFBSupport flag: Simplified the configuration by hardcoding the enableLegacyFBSupport flag to true, ensuring legacy Fiber support is always enabled. 🔧 (#28701)

Chores

• Cleanup enableBigIntSupport flag: Cleaned up the enableBigIntSupport flag by removing its usage and imports across various files. 🧼 (#28711)

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