We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
react changelog
Here's the latest scoop on all the exciting updates and fixes we've rolled out! π
-
New feature: First-Class Support for Thenables
We've jazzed up the React DevTools by introducing first-class support for Thenables! Now, Promise-like objects are treated with the respect they deserve during hydration, with their status (fulfilled, rejected, or pending) clearly displayed. This means you can now inspect these objects more effectively, with previews that match each status. Plus, we've got comprehensive tests in place to ensure everything runs smoothly with subclassed promises and deeply nested objects. π -
New feature: AutoDepsDecoration Event
Say hello toAutoDepsDecoration
, a new event that enhances logging capabilities by capturing and logging the locations of dependencies used in effect hooks. This gives developers better insights into dependency management within their components, making debugging a breeze! π -
New feature: Remove Dependency Arrays with Ease
We've added a snazzy new code action feature that lets you remove dependency arrays when editing code within functions eligible for automatic dependency tracking. This means quick fixes and streamlined editing for developers, all thanks to the newAutoDepsEligibleEvent
. π‘ -
New feature: Partial Hydration for Activity
Activity boundaries now act independently, just like Suspense boundaries. This lets you hydrate outer content first and then move on to content in an Offscreen lane. It's all about prioritizing hydration when props flow or interactions happen. Plus, we've made sure<Activity mode="hidden">
content is deferred for later client rendering. Neat, right? π€ -
Improvement: Version Name in Publish Script
We've spiced up the publish script by allowing an optionaltagVersion
parameter. This means you can now append a tag version to the version name, like19.1.0-rc.1
, for a more detailed versioning format. Version clarity, here we come! π¦ -
New feature: Build
react-server-dom-webpack
for CodeSandbox
Testing Flight changes just got easier with the ability to buildreact-server-dom-webpack
for CodeSandbox. Now you can test and demonstrate server component features in a sandbox environment. π οΈ -
Improvement: Add Changelog
We've added a shiny newCHANGELOG.md
file documenting changes from19.0.0-beta-9ee70a1-20241017
to19.1.0-rc.1
. This comprehensive list highlights updates, improvements, and bug fixes across various components. π -
Bugfix: Handle Rejected Promises Gracefully
No more hanging! We've fixed an issue in the React Server DOM where rejected promises during prerendering could cause indefinite hangs. Now, errors are caught and processed correctly, ensuring the prerendering flow continues smoothly. π -
Improvement: Docs Resource as a Tool
The docs resource in the React MCP server now functions as a tool, returning plaintext instead of Markdown. This change enhances usability and streamlines the response format for documentation queries. π -
Bugfix: Suspense Boundary Visibility
We've resolved a quirky edge case with dehydrated Suspense boundaries, ensuring proper hiding and unhiding of content when the parent boundary resuspends. This fix enhances the robustness of React's handling of complex rendering scenarios. π -
Bugfix: Fix Copyright Script
Our copyright script got a little smarter! It now avoids trying to open directories, preventing errors during execution. π -
Chore: Remove Compiler Weekly Release
We've discontinued the weekly release process for the compiler, streamlining our continuous integration process for better efficiency. ποΈ
And that's a wrap! Keep an eye out for more updates and happy coding! π
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! π»β¨
In this update, we've introduced several exciting new features and improvements to enhance your React experience. From enabling direct object support in media elements to enhancing automated notifications and improving component tracking, these changes aim to streamline development and optimize performance. Let's dive into the details! π
-
New Feature: Pass Blob/File/MediaSource/MediaStream to Media Elements π₯π΅
- You can now pass Blob, File, MediaSource, or MediaStream objects directly to the
src
attribute of<img>
,<video>
, and<audio>
elements. This is under theenableSrcObject
flag, offering a more convenient and declarative API style.
- You can now pass Blob, File, MediaSource, or MediaStream objects directly to the
-
New Feature: Suspensey Images Behind a Flag πΌοΈβ³
- Images now wait to render until decoded, with a 500ms timeout, enhancing the handling of images in React. This applies to various transitions and can be opted out with certain attributes.
-
Improvement: Component Lifecycle Logging π
- We've added logging for mount, unmount, reconnect, and disconnect events in components, making it easier to track lifecycle events across various phases.
-
New Feature: Discord Notifications for Publish Failures π
- If an automated publish fails, a notification will be sent to a Discord channel, improving communication within the development team.
-
New Feature: Enable Suspensey Images in
<ViewTransition>
π- Suspensey Images are now enabled within
<ViewTransition>
subtrees, even if the flag is off, enhancing view transitions.
- Suspensey Images are now enabled within
-
New Feature:
unstable_Activity
in Server Entrypoint πunstable_Activity
can now be imported and rendered from a Server Component, similar to other component types like Suspense and ViewTransition.
-
Improvement: Fabric Priorities Mapping π
- We've expanded the mapping of event priorities between Fabric and the React reconciler to include a broader range of priorities.
-
Improvement: Inline Preamble Contribution π
- Preamble contributions are now emitted earlier in the render phase, enhancing rendering efficiency.
-
Bugfix: Correct Type in
getTypeSymbol
π- The
getTypeSymbol
function now correctly includesstring
as a return type, improving type handling.
- The
-
Bugfix: Fix
measure
Error in Performance API β²οΈ- Addressed an error in the
measure
function related tostartTime
, preventing incorrect logging during component rendering.
- Addressed an error in the
-
Bugfix: Safari
display: inline
Workaround π- Introduced a workaround for a Safari bug involving
view-transition-name
, with automatic style adjustments to prevent duplicate name errors.
- Introduced a workaround for a Safari bug involving
These updates are set to make your React development smoother and more efficient, while also enhancing the performance and compatibility of your applications. Happy coding! π
Hey there, React enthusiasts! We've got some exciting updates and fixes coming your way. Here's a rundown of the latest and greatest changes to keep your development experience smooth and your apps running like a dream. Check it out! π
-
New feature: Added support for the
satisfies
operator in thebabel-plugin-react-compiler
. This enhancement boosts TypeScript capabilities, making it easier to handle type annotations and expressions. π -
New feature: Updated the changelog for version 19.1.0, featuring the shiny new "Owner Stack" for better debugging and error overlays. This is a game-changer for understanding component relationships during development. π οΈ
-
Improvement: Introduced logging for component lifecycle events like mounting, unmounting, reconnecting, and disconnecting. This makes tracking performance across various React lifecycle phases a breeze. π
-
New feature: Say hello to
startGestureTransition
, a new API replacinguseSwipeTransition
. It offers a more flexible and unified approach to handling gestures and transitions. Swipe away! π -
New feature: React DevTools now displays native tags for Native Host components. Hover over a badge to see the magic and identify native components with ease. π
-
Bugfix: Fixed an issue during snapshotting when errors occurred due to duplicate names in the "old" state. Now, the system continues through phases to maintain consistency. π
-
Improvement: Enhanced handling of host instances in persistent mode by releasing old instances and acquiring new ones when clones are created. This boosts the reliability and performance of React DevTools. βοΈ
-
Improvement: Adjusted animation ranges in View Transitions based on duration and delay, ensuring smoother synchronization and a better user experience. π₯
-
Bugfix: Resolved bugs in performance tracking for effects, ensuring accurate logging of component effects even when children are involved. π
-
Bugfix: Fixed test filter and watch mode issues by updating the file watcher to monitor the correct directory. Testing just got smoother! π§ͺ
-
Chore: Tidied up the changelog by ensuring consistent spelling of "Owner Stack" and "Component Stack". Keeping it clean and professional! π
That's all for now, folks! Keep coding, keep creating, and stay tuned for more updates. Happy Reacting! π
Hey there, awesome devs! π We've been busy making some cool changes to enhance your coding experience. Here's a fun rundown of the latest updates and fixes we've rolled out. Dive in and see what's new! π
-
New Feature: We've introduced an "auto" class in React's ViewTransition system. This lets you specify that the built-in animation should be used for transitions. Now, you can set
<ViewTransition default="foo" enter="auto">
for more flexible transition control. π¨ -
New Feature: Say hello to
getRootNode(options)
for fragment instances! This nifty method now lets fragments return the root node of their parent, making DOM interactions smoother and more intuitive. π³ -
New Feature: Need to grab some styles? The
getComputedStyle
helper is now part of theViewTransitionPseudoElement
class. It's perfect for accessing styles without animations getting in the way. π -
New Feature: We've added artifact integrity verification to our download process. This ensures that the artifacts you download match the build attestations, keeping everything secure and reliable. π
-
New Feature: Introducing
Effect.ConditionallyMutateIterator
to our compiler! It captures known arrays, maps, and sets, while allowing mutations for other values, improving performance and correctness. π -
Improvement: Our compiler now recognizes function constructors with an
isConstructor: boolean
property. Plus, Map and Set globals are now built-in, enhancing type handling and performance. π οΈ -
Improvement: We've scoped permissions for all workflows, ensuring they only operate with necessary permissions. This boosts security and clarity in our CI/CD pipeline. π
-
Bugfix: Fixed a bug in the React compiler that optimizes components with arrow functions and implicit returns. This resolves issues with return type identification, enhancing compilation efficiency. π
-
Improvement: Now, when there's an "enter" animation,
shouldStartViewTransition
is marked as true. This ensures those cool transitions animate even without other updates. β¨ -
Bugfix: We've fixed the hoisting of
let
declarations in the React compiler, preventing duplicate declarations and errors. Your code stays clean and error-free! π§Ή -
Bugfix: Notifications and labels for forks are now working smoothly in PRs. We've ensured these actions run safely from the target repository. π
-
Chore: Added missing permissions to
runtime_commit_artifacts.yml
, allowing write access tocontents
. This keeps our artifact commits running smoothly. π¦
That's all for now, folks! Keep coding, keep creating, and stay awesome! π
Hey there, React enthusiasts! We've got a bunch of exciting updates and some nifty bug fixes to share with you. Let's dive into the latest changes that are sure to enhance your development experience. π
-
New feature: We've added
focusLast()
andblur()
to fragment instances, along with extending the existingfocus()
method to accept options. This means you can now manage focus more effectively within fragment instances, focusing on the first or last focusable element or blurring an element if it's currently focused. π― -
Improvement: We've separated the Activity element type from Offscreen to allow better boundary semantics during hydration. This change enhances the performance and user experience without affecting Offscreen behavior in suspended children. π¨
-
New feature: A new validation feature has been introduced to prevent dynamic component creation during render, helping you avoid unintended state resets. This validation is off by default but aims to catch obvious mistakes, ensuring your components are stable and predictable. π
-
New feature: The
getClientRects()
method is now available for fragment instances, allowing you to retrieve bounding boxes of child elements, making it easier to interact with fragments. π -
Improvement: We've updated the React compiler to support numeric literals as valid object property keys, expanding the flexibility of property key handling. π’
-
New feature: Fragment refs are now enabled in an experimental capacity, allowing for testing in the Next.js router when other experimental features are active. π§ͺ
-
New feature: The GitHub Actions workflow now supports parameterizing branch cleanup with a PR number input, making cache management more flexible and efficient. π§Ή
-
Improvement: We've improved security by replacing third-party actions with direct Git commands in our CI/CD pipeline. A
dry_run
option has been added for testing workflows without pushing changes. π -
Bugfix: We've fixed ID duplication issues in
ViewTransition
components, ensuring unique identifiers for nested transitions, preventing naming conflicts. π οΈ -
Chore: The Discord webhook action in our workflows is now pinned to a specific commit SHA, providing more stability and reliability. π
-
Bugfix: The COMMIT_SHA artifact in GitHub Actions is now set to reflect the original commit SHA, improving the accuracy of sizebot links. π
-
Bugfix: We've corrected the component name handling for Portals and added tests for built-in components using
React.lazy
, ensuring accurate error messages and better functionality. π§©
We hope these updates make your React development journey a bit smoother and more enjoyable. Keep building awesome stuff! π
This update brings a bunch of exciting enhancements and fixes to keep your React projects running smoothly and efficiently! π Here's a rundown of what's new and improved:
-
New Feature: Merging React Compiler Rule
We've merged thereact-compiler
rule into theeslint-plugin-react-hooks
, keeping commit history intact while adding new dependencies. This is a major change, so keep an eye out for the next big release! π -
New Feature: DOM Fixture for Fragment Refs
Test Fragment References with our new DOM fixture page! Check out howaddEventListener
andremoveEventListener
work with Fragments and get those event listeners dancing. πΊ -
New Feature: Ref Support for Fragments
Fragments just got cooler! Now they can accept aref
prop, allowing you to attach event listeners and manage groups of elements with ease. This experimental feature is ready for your feedback. π -
Improvement: Dynamic renameElementSymbol
We've maderenameElementSymbol
more dynamic for native Facebook, improving the flexibility of feature management. No more static declarations! π -
Bugfix: Child Node Checks for moveBefore
Fixed a critical issue withmoveBefore
by ensuring nodes are connected before moving them. This prevents errors during initial insertions. β οΈ -
Improvement: Enhanced Error Logging
We've improved error handling forstartViewTransition
, providing clearer insights into errors during development while keeping production logs clean. π οΈ -
Bugfix: Server Reference and .bind() Compatibility
EnsuredregisterServerReference
works seamlessly with.bind()
, maintaining compatibility and preventing errors. π -
New Feature: Prebuild Commands with Rollup
Introducing aprebuild
option for Rollup, allowing you to run commands before building your bundle. Perfect for complex build requirements! π οΈ -
New Feature: Experimental moveBefore
We've enabledmoveBefore
in experimental releases, letting you test this feature while we gather feedback. π§ͺ -
Bugfix: Canceling Animations in View Transitions
Prevent pesky animation flashes by manually canceling finished view transition animations. Safari users, rejoice! π¬ -
Improvement: Compiler Migration to tsup
We've migrated our compiler packages totsup
, improving build performance and enabling type declaration generation. Fast and efficient! β‘ -
Chore: Prettier Formatting
Ran Prettier oneslint-plugin-react-compiler/src/types
for cleaner, more consistent code. Because neat code is happy code! β¨
These updates are designed to enhance your development experience and keep your projects in tip-top shape. Dive in and explore the new features and improvements! π
Hey there, code enthusiasts! Here's the latest scoop on what's been cooking in the React kitchen. π³ From swipe-tastic transitions to server reference wizardry, we've got some nifty updates to make your coding journey smoother and more exciting. Let's dive into the changelog! π
New Features & Improvements
-
Swipe Gesture Magic: We've enhanced the
useSwipeTransition
feature to keep your current state live during swipe gestures. This means you can keep watching that cat video while swiping! π±β¨ By rendering a clone offscreen and animating it onscreen, we ensure smooth transitions without flickering. Perfect for those TikTok-like experiences! -
Server Reference Sorcery: Introducing
registerServerReference
for client builds in React Flight. This nifty function lets you register server references seamlessly, even when using theserverModuleMap
option. Now your server references can travel back and forth like seasoned jet-setters! πβοΈ -
Node.js Version Upgrade: Heads up! The
eslint-plugin-react-hooks
now requires Node.js version 18 or higher. This change preps us for merging the compiler plugin and marks a breaking change for users on older Node versions. Time to upgrade for smoother sailing! β΅οΈ -
Dialog Event Support: We've added support for
beforetoggle
andtoggle
events in dialog elements. This means more interactive and responsive dialog components, enhancing user experience! π¬π -
Safari ScrollEnd Polyfill: Safari users, rejoice! We've polyfilled the
onScrollEnd
event to work like a charm in Safari, ensuring consistent behavior across browsers. Now you can scroll to your heart's content without missing a beat! π -
Dynamic Feature Flags: We've made the
enableScrollEndPolyfill
flag dynamic, allowing for easier testing and deployment of experimental features. Flexibility is key! π -
View-Transition Build Shorthand: For those frequently testing the view-transition fixture, we've added a shorthand command to speed up the build process. Less waiting, more coding! β©
-
Flat Config for ESLint: The
recommended
config now points to the flat config ineslint-plugin-react-hooks
, simplifying your setup. The legacy config is still available, but the future is flat! π
Bug Fixes & Chores
-
CI Workflow Accuracy: Fixed an issue where failures were being marked as successes in GitHub Actions. Now, failures will be reported correctly, ensuring accurate test results. No more false positives! βοΈ
-
Discord Notification Tweak: Improved the Discord notification title in our CI workflow to ensure clarity and accuracy. Your notifications just got a little more precise! π―
-
Cleanup: We've removed an unused
netlify.toml
file, keeping our codebase tidy and clutter-free. Less is more! π§Ή
That's all for now, folks! Keep coding, stay curious, and enjoy these updates. Until next time, happy hacking! π»β¨
Hey there, fellow React enthusiasts! π We've got some exciting updates and fixes coming your way. From improvements in rendering and bundling to new features for React Native, here's a rundown of what's new and improved in our latest update. Let's dive in!
-
New Feature: React Native Document Instances π We've added support for
Document
instances in React Native, known asReactNativeDocument
instances. This change enhances the React Fabric renderer to manage these instances, making it easier for React Native to access them using container or root tags. It's a step forward in integrating document instances within the React Native framework. -
Improvement: Suspense Boundaries in Fiber π Suspense boundaries can now be rendered at any level within a react-dom application, thanks to an update to Fiber. This enhancement treats the document body as the default render scope, offering more flexibility in rendering Suspense components. Note that hydration isn't supported yet, so Fizz and Fiber aren't fully unified just yet.
-
Improvement: Import Maps in React Flight Parcel π¦ We've enhanced the React Flight Parcel bundler by enabling import maps to be passed through client references. This update addresses the limitations of native import maps in client-side navigation scenarios, improving caching strategies and optimizing the performance of React applications using Parcel.
-
Improvement: Parallel DevTools Builds βοΈ Our CI process just got a speed boost! We've parallelized the build process for React DevTools, reducing the CI job runtime. By building DevTools simultaneously for Chrome, Firefox, and Edge, we're streamlining development and getting faster feedback cycles.
-
Bugfix: React Compiler Healthcheck Script π We've fixed an issue with the
react-compiler-healthcheck
script by adding a shebang. This resolves execution problems withnpx
, allowing the script to run smoothly and compile components without a hitch. -
Bugfix: Removal of Unused Rust Port π οΈ We've cleaned up by removing an unused experimental Rust port of the React Compiler. While the experiment showed promise, we're sticking with JavaScript for the React Compiler, focusing on lightweight native wrappers and collaboration with the Hermes team.
-
Chore: Maintainers Update π§ Our MAINTAINERS file got a refresh! We've added a new maintainer, "unstubbable," and removed some old entries. This update keeps our contributor list accurate and up-to-date.
-
Bugfix: Typo Correction in CI βοΈ A small typo in the GitHub Actions workflow file has been fixed, ensuring error messages are clear and correctly formatted.
We hope these updates make your React experience even better! Keep building, and stay tuned for more improvements. Happy coding! π
Here's a delightful update on the latest changes and improvements that have been made:
-
New feature: Transition Types π - We've rolled out an isomorphic API for adding Transition Types, primarily for enhancing View Transitions. This allows you to specify transition causes, making animations even cooler and more context-aware. You can now use CSS, class-based styling, or event callbacks to control animations based on transition types. Future updates might even let you use these types with
useEffect
for even broader applications. -
Bugfix: JSXText with Brackets ππ§ - We've squashed a bug in the React compiler where
JSXText
was misbehaving with brackets. The fix ensures that JSX text is correctly rendered, even when it includes{pageNumber}
within a JSX element. LlamaIndex users, rejoice! Your product is no longer blocked. -
Improvement: DevTools and Experimental Hooks π - DevTools now supports the
experimental_useEffectEvent
hook, making it easier for developers to inspect this experimental feature. Plus, we've streamlined the handling of theexperimental
prefix, replacing the oldunstable_
prefix. -
Bugfix: Array.map Type Annotation π - We've corrected the type annotation for
Array.map
in the React compiler. The update ensures that mutating effects of functions are correctly handled, leading to more reliable outcomes in React apps. -
Improvement: ESLint Flat Plugin Syntax π - Our
eslint-plugin-react-compiler
now supports the flat plugin syntax for ESLint 8+, aligning with the latest ESLint configuration styles. This makes it easier to configure and use, with updated documentation to guide you along. -
Bugfix: JSX Escape Sequences in Babel π§ββοΈ - We've improved the handling of JSX escape sequences in the Babel generator. Strings with potential escape characters are now correctly parsed, enhancing the robustness of JSX code generation.
-
New feature: Impure Function Validation π« - A new validation feature has been added to reject calls to impure functions during rendering. While initially off by default, this is a step towards ensuring cleaner, more predictable code.
-
Chore: Test Organization π - We've tidied up by moving effect dependency inference tests to a dedicated directory. This makes it easier to see related tests and improves project organization.
These updates are sure to enhance your React development experience, making your applications smoother, more efficient, and easier to debug. Keep pushing those boundaries! π
Here's a rundown of the latest updates and improvements. Get ready to dive into some exciting new features and essential fixes! π
New Features:
-
View Transition Refs (#32038): We've introduced
ViewTransitionRef
objects, giving developers more control over animations. These refs allow you to programmatically manage animations for view transitions, offering an alternative to CSS-based animations. While it doesn't yet support SSR, this feature is a big step toward more dynamic transitions. π₯ -
View Transition Events (#32041): Say hello to five new events for
<ViewTransition>
. These events (onEnter
,onExit
,onLayout
,onShare
,onUpdate
) provide hooks for specific moments in the transition lifecycle, allowing for more precise animation control. Each event receives aViewTransitionInstance
, so you can animate without needing a ref. π -
View Transition Class Names (#32050): Now you can apply specific class names based on the transition event kind. This update adds five props (
enter
,exit
,layout
,share
,update
) to<ViewTransition>
, making it easier to tailor animations to your needs. Plus, the"none"
value lets you opt-out of certain transitions for finer control. π¨ -
ESLint Plugin React Hooks Enhancement (#30774): We've added support for flat configuration in
eslint-plugin-react-hooks
, making it easier to integrate with ESLint 9.0.0 and above. This update simplifies configuration and maintains compatibility with older ESLint versions. π§ -
Automatic PR Labeling (#32100): Introducing a
MAINTAINERS
file to document core team members and automatically label PRs from them, improving workflow and transparency. π·οΈ
Improvements:
-
Restore
useMemoCache
(#32067): We've enhanced caching capabilities by restoringuseMemoCache
in renderers that support Client APIs, boosting performance and efficiency. π οΈ -
Reduce Nullable Hooks Risk (#32068): Enhancements to the
Dispatcher
ensure certain hooks are non-nullable, reducing potential runtime errors and improving type safety. π -
Console Forks Removal Flag (#32058): A new feature flag allows for the removal of console-related warnings and errors, enhancing the developer experience by reducing noise during development. π
Bug Fixes:
-
DevTools Profiling Sessions (#32066): Fixed an issue causing DevTools to freeze during consecutive profiling sessions by clearing existing profiling data before starting a new session. No more infinite loops! π
-
Compiler Edge Case (#32055): Resolved an edge case in the React compiler related to object methods, ensuring smoother compilation with
compilationMode: infer
. π οΈ -
DevTools
useResourceEffect
Support (#32088): Added missing support for theuseResourceEffect
hook in React DevTools, preventing errors and improving stability. π
Chores:
- Remove
batchedUpdate
Usage (#32074): Refactored DevTools to eliminate the now no-opbatchedUpdates
function, streamlining code for concurrent mode. π§Ή
Stay tuned for more updates, and enjoy these new capabilities and improvements! π
Hey there, React fans! We've been busy making some exciting updates and improvements to the React framework. Check out the latest changes that are sure to enhance your development experience and bring some extra pizzazz to your projects! πβ¨
-
New feature: The React Fiber architecture now supports View Transitions v2, with a focus on using View Transition Classes and Types. This ensures that animations are only triggered if the browser supports the necessary features, providing a more consistent user experience across different platforms. π
-
New feature: Navigation support has been added to the View Transition fixture, utilizing both
history.pushState/popstate
and the Navigation API. This enhances the synchronization of navigation transitions and scroll restoration, improving the overall user experience. π§ -
New feature: Introducing the
<ViewTransition>
component! This nifty addition allows you to animate changes between UI states during asynchronous updates, making your apps look smooth and delightful. π¨ -
New feature: You can now style your View Transitions using the
className
prop on the<ViewTransition>
component, enabling reusable and composable styling. CSS Modules are fully compatible, making it easy to maintain unique namespaces for your transition styles. π¨ -
New feature: A new GitHub Actions workflow has been introduced to send notifications to Discord when a pull request is labeled with "React Core Team," ensuring important updates don't go unnoticed. π
-
Improvement: The React DOM testing framework has been enhanced with more assert helpers, improving the consistency and effectiveness of testing practices across various components. π οΈ
-
Improvement: The
RefStatic
andLayoutStatic
flags in the React reconciler have been unified, simplifying the handling of offscreen content and enhancing the efficiency of the rendering process. β‘ -
Chore: The display of component names during tracing in React DevTools is now enabled by default, making debugging more informative and straightforward. π΅οΈββοΈ
-
New feature: The
ViewTransitionComponent
has been added to React DevTools, ensuring it is recognized and can be visually distinguished within the development tools. π -
Bugfix: Fixed a scrolling issue in the React DevTools tree view, ensuring scrolling to an item only occurs when the components panel is visible, improving the user experience. π
-
Bugfix: Addressed a warning issue related to empty string
href
attributes during hydration, streamlining attribute handling for various HTML elements. π§ -
Bugfix: The
react-compiler-runtime
package now consistently outputs in CommonJS format, enhancing compatibility and simplifying module handling for developers. π¦
Stay tuned for more updates as we continue to improve and expand React's capabilities. Happy coding! π
Here's the latest scoop on the updates and improvements made to our codebase! We've been busy enhancing performance, fixing bugs, and streamlining processes to make everything run smoother and faster. Let's dive into the details of the most significant changes:
New Feature: Profiler Mode for Fixtures π
We've simplified the component-level profiling process by adding a Profiler mode to fixtures, no longer requiring React DevTools installation. This change resolves previous inconsistencies and lets developers easily access performance insights by wrapping main application components within a Profiler component in the hydrateRoot
calls. Say goodbye to confusion and hello to a streamlined profiling setup!
Improvement: Parcel Flight Client Enhancement π
The Parcel Flight client now includes the prepareDestinationForModule
function, ensuring components dynamically imported during rendering are preloaded effectively. The <Resources>
component now inserts only <link>
elements for stylesheets, leaving scripts to React. This change helps prevent Flash of Unstyled Content (FOUC) and opens up discussions for future improvements in resource management.
Improvement: Compiler Bundler Switch to esbuild π οΈ
We've switched the compiler's bundler from Rollup to esbuild, drastically reducing build times from 75 seconds to under 10 seconds! This change optimizes the build process for Node.js environments, making our development workflow more efficient. Out with the old, in with the newβesbuild is here to stay!
New Feature: Yield Every Other Frame for Transition/Retry Work π¨
To improve performance during transitions and retries, we've introduced a new scheduling mechanism that yields every 25ms. This change helps prevent animations from hogging CPU time, ensuring smoother transitions and a more responsive user interface. While currently disabled by default, this feature represents a strategic move towards optimizing React's rendering performance.
Bugfix: DevTools Compiler Integration Test π
We've fixed a pesky bug in the DevTools integration test related to version handling, specifically addressing a TypeError: Invalid Version: 19
. The updated version condition in our script now correctly processes the version range, allowing the integration tests to run smoothly without any version validation hiccups.
Chore: ReactDOMFloat Test Refactor π§Ή
We've split the ReactDOMFloat testing into its own pull request to better manage its complexity. This refactor enhances the clarity and maintainability of our tests, allowing for more focused reviews and discussions. It's all about keeping things organized and efficient!
These updates reflect our ongoing commitment to improving performance, enhancing user experience, and maintaining high-quality code standards. Stay tuned for more exciting developments!
Hey there, code wizards! We've been busy brewing up some magical improvements and fixes in the React compiler. Here's what's new and improved in our latest update! πβ¨
-
New Feature: Magical Fire Imports π₯
We've added an experimental feature that automatically sprinkles inimport { useFire } from 'react'
whenever you use the mystical "fire" syntax. This is still in the cauldron, bubbling away, and might not make it to the final potion, but itβs a step towards making your coding spells more powerful! -
Improvement: Cast Those Types Like a Pro! πͺ
The compiler now gracefully handles type cast expressions with references, eliminating those pesky false positives when a ref-accessing function is placed inside a type-cast array. Your type-casting magic just got a whole lot smoother! -
Improvement: Keep Your Fires Inside! π₯π
We've tightened the rules to ensure that allfire
calls are safely tucked inside effect lambdas. This prevents any rogue fires from causing chaos in your code. Plus, we've corrected the import path to keep everything neat and tidy. -
Improvement: Rewriting the Rules of Fire π
When usingfire
in effect dependency arrays, we now ensure theyβre literal arrays. This rewrite ensures your spells are precise and error-free, giving you clear feedback if things go astray. -
Bugfix: Fixing the Fire Snap π§π₯
Weβve fixed a broken snapshot related to thefire
function, ensuring youruseEffect
hooks are structured correctly and work like a charm. No more compilation errors to worry about! -
Bugfix: Yielding No More π«π οΈ
TheenableYieldingBeforePassive
feature has been turned off in internal test renderers, due to some hiccups on the React Native side. This is a temporary fix, ensuring smooth sailing while we iron out the kinks. -
Chore: Cleaning Up the Unused Spells π§Ή
Weβve removed the unusedtoWarnDev
function from the testing fixtures. It was just gathering dust, so weβve tidied up to keep our codebase sparkling clean.
Thatβs it for now, folks! Keep coding, keep creating, and may your React adventures be nothing short of magical! π§ββοΈβ¨
Hey there, React fans! π We've got some exciting updates that are sure to make your hydration processes smoother than ever. Let's dive into what's new:
-
New Feature: Hydration Lanes in Action π
We've revamped how hydration work is scheduled by using Hydration Lanes instead of raw update lanes. This means no more random hydration mixing with other updates! Now, when you initiate root hydration or useunstable_scheduleHydration
, it's all handled through the right lanes. This change prevents unnecessary client rendering during hydration, ensuring a smoother and more efficient process. -
Bugfix: No More Unwanted Client Rendering π
Updating a root while it's still hydrating used to cause some hiccups, like triggering client rendering when it wasn't needed. With our new approach, updates apply after hydration, sidestepping any potential mix-ups and keeping things running like a well-oiled machine. -
Performance Boost: Streamlined Hydration and Updates β‘
We've tackled potential performance issues by ensuring thatunstable_scheduleHydration
doesn't get tangled with updates that might force a rewind. Now, hydration starts cleanly without unnecessary updates, making your app snappier and more reliable. -
Safety First: Feature Flag Added π
We've introduced a kill switch,enableHydrationLaneScheduling
, for those who love to experiment but want a safety net. It's all about giving you control while keeping things safe, especially since these scenarios are pretty rare.
With these improvements, your React apps are set to hydrate like never before. Happy coding! π
Hey there, code adventurers! We've got some exciting updates and bug squashes in our latest changelog. Dive in to see what's new and improved in the world of React! π
-
New feature: Say hello to the
react-server-dom-parcel-package
! This shiny new package integrates React Server Components (RSC) with the Parcel bundler, making your life easier by combining client and server modules into a single graph. No more separate manifest files, and CSS gets combined automatically! Plus, a special<Resources>
component is generated to handle scripts and stylesheets. π -
Improvement: We've enhanced the scheduling of hydration work by using Hydration Lanes. This ensures hydration tasks don't mix with other updates, preventing unnecessary client rendering. A new feature flag,
enableHydrationLaneScheduling
, lets you experiment with this approach safely. π§ -
Improvement: The
enableOwnerStacks
feature is now dynamic! This means you can toggle it on or off during development, giving you more control overcaptureOwnerStack
behavior. We've updated tests to reflect this change, ensuring accurate console error messages based on the flag's state. π -
Improvement: Our compiler now supports non-declaration initializations in
for...of
andfor...in
loops. This enhancement allows for more complex patterns without hitting error states, making your code more flexible and robust. π οΈ -
Bugfix: Fixed a pesky issue where refs were being dropped when using spread properties in JSX. Now, both the ref and spread properties are combined correctly in the output, ensuring your components work as intended. π
-
New feature: The
react-server-dom-parcel
package is going public! We've removed the "private" attribute, paving the way for broader access and integration into meta-frameworks. π -
Bugfix: We've fixed the canary version strings by reverting the
canaryChannelLabel
back to 'canary'. This ensures correct version names and tags after the stable release of version 19. π¦ -
Chore: Updated version numbers for prerelease channels, including canary and experimental versions. This keeps everything in sync and up-to-date with the latest improvements and fixes. π’
That's all for now, folks! Keep coding and stay tuned for more awesome updates. Happy hacking! π»β¨
Welcome to the latest React updates, where we've been busy making things smoother, faster, and just all-around better! π Let's dive into the highlights:
New feature
- Meta Magic! We've added a shiny new target option,
target: 'donotuse_meta_internal'
, specifically for Meta bundles. This allows for direct imports ofuseMemoCache
from thereact
package, making life easier for Meta applications by ensuring compatibility and up-to-date React features. π
Improvement
-
Suspense No More! We've tackled an issue with Suspense boundaries during server-side rendering (SSR). Now, if the server stream is incomplete, React will schedule client renders for any unfinished Suspense boundaries once the document fully loads. This ensures your app doesn't get stuck in a fallback state. π οΈ
-
Default Imports Delight: The React compiler now supports default imports in the autodependency config. This means you can smoothly import functions like
import useWrapperEffect from 'useWrapperEffect'
, making dependency management a breeze. π¬οΈ -
Refine those Refs: We've improved the React compiler by skipping
.current
field accesses in inferred dependency arrays. This change helps avoid incorrect dependency tracking, enhancing the reliability of your effect hooks. π§
Bugfix
-
Typo Tidy-Up: We've fixed a couple of typos in the CHANGELOG.md, ensuring clarity and professionalism in our documentation. Because every letter counts! π
-
Back to Basics: A previous update to
eslint-plugin-react-compiler
has been reverted due to compatibility issues with older Babel versions. This ensures that older codebases can continue to function without hiccups. π
These updates reflect our ongoing commitment to improving React's performance and developer experience. Keep coding, and enjoy the new features and fixes! π
Here's a fun and exciting changelog update for you! π We've got some cool new features and improvements that are sure to make your coding experience even more delightful. Let's dive into the latest changes:
-
New feature: Infer deps configuration π
Introducing a snazzy new way to configure dependency inference for React effect hooks! This experimental feature lets you specify which functions to analyze for dependencies based on their module and required arguments. Whether it'suseEffect
from React or a customuseExperimentalEffect
hook, your dependencies are now smartly appended to the argument list. Get ready for a smoother coding experience! π -
Improvement: Conditional export of
useResourceEffect
π
We've made it easier to detect the presence ofuseResourceEffect
by conditionally exporting it based on a feature flag. This update brings clarity and flexibility, allowing you to use this hook only when theenableUseResourceEffectHook
flag is enabled. Say goodbye to confusion and hello to streamlined feature management! π― -
Improvement: Mark all lanes in order on every new render π€οΈ
No more missing out on performance lanes! We've ensured that all four lanes are displayed in the correct priority order, even if they're not actively used. This update helps you visualize all your options and keep track of performance metrics accurately. All aboard the performance train! π -
New feature: First cut at dep inference π§©
We're exploring the future of effect dependency management with an initial prototype that automatically infers dependencies foruseEffect
calls lacking a dependency array. Although it's still in the research phase, this feature lays the groundwork for a more automated approach to managing effect dependencies. Stay tuned for more exciting developments! π -
Improvement: Prune unused array destructure items during DCE βοΈ
Our Dead Code Elimination process just got an upgrade! We can now prune unused items from array patterns more effectively, replacing them with "holes" when necessary. This enhancement is especially handy for identifying unuseduseState
destructured items, helping you maintain best practices effortlessly. Clean code, happy code! π§Ή -
New feature: Add moveBefore Experiment π
Say goodbye to state loss when reordering stateful nodes! ThemoveBefore()
function is here to preserve state during node reordering. Although still experimental, this feature promises to solve a long-standing issue in React. Keep an eye out for this game-changer! π -
Chore: Replace deprecated dependency in
eslint-plugin-react-compiler
π οΈ
We've swapped out a deprecated Babel plugin dependency to keep things fresh and up-to-date. By replacing@babel/plugin-proposal-private-methods
with@babel/plugin-transform-private-methods
, we're ensuring compatibility with the latest Babel features. Your codebase is now healthier and happier! π±
That's all for now, folks! Keep coding and enjoy the new features and improvements. Until next time! π
Hey there, code enthusiasts! We've got a fresh batch of updates to share with you, packed with new features, bug fixes, and improvements that are sure to make your coding experience even more delightful. Let's dive right in! π
-
New Feature: Separate SuspendedOnAction Flag
Introducing a newSuspenseActionException
to help you track suspensions caused by actions vs. data! This nifty update aims to improve how React handles promises, making your debugging life a tad easier. Just a heads up, though β it's a bit complex and might lead to extra renders. π€ -
New Feature: Scaffold Initial Types
Say hello touseResourceEffect
, a brand new dispatcher type that's setting the stage for future enhancements in React's hooks system. While it's still a work in progress, it's a promising addition to the framework. π -
New Feature: Enable UseResourceEffectHook Flag
We've added a shiny new feature flag,enableUseResourceEffectHook
, to help manage resources more efficiently. It's experimental for now, but keep an eye out for its potential in boosting React's performance! π -
New Feature: Rename Effect Type
Introducing a newEffect
type, currently an alias forSimpleEffect
, but it's all part of a grand plan to enhance React's effect management system. Stay tuned for more exciting updates! π -
Bugfix: Reactive Ref Handling
We've squashed a bug that was causingref.current
to misbehave in the reactivity department. Now, your refs will be as reactive as ever, ensuring your components work seamlessly! ππ¨ -
Improvement: Enable on RTR FB Builds
TheenableUseResourceEffectHook
flag is now live on React Native builds for Facebook, bringing new resource management capabilities to the table. ποΈ -
Bugfix: Type Inference + Control Flow
Addressing a type inference bug, we've added a reproduction case to highlight the issue. Plus, we've tweaked some functions to improve consistency with Flow and TypeScript. π -
Improvement: Support Ref as Prop in JSX
enableRefAsProp
is now fully supported in the JSX transform, ensuring your refs are handled consistently across the board. π¦ -
New Feature: Basic Implementation of useResourceEffect
An experimental hook,useResourceEffect
, is here for early testing. It's still in its infancy, so don't rely on it just yet, but it's an exciting glimpse into the future of React! π¬ -
Bugfix: Dependency Comparison in useResourceEffect
We've fixed a pesky bug inuseResourceEffect
that was causing incorrect dependency comparisons. The fix ensures your effects are handled correctly, even when mixed with other types. π§
That's all for now, folks! Keep coding, keep experimenting, and stay tuned for more awesome updates! ππ©βπ»π¨βπ»
Welcome to the latest updates in our codebase! We've been busy squashing bugs, adding some cool new features, and making improvements that are sure to enhance your experience. Here's a rundown of what's been happening:
Bugfix π
- Fix Overlapping "message" Bug in Performance Track (#31528): We've tackled a pesky issue where overlapping events were causing chaos in React's performance tracking. Now, the end time of the last render is stored to prevent any mishaps, ensuring smoother performance tracking.
- [compiler] Repro for reactive ref.current accesses (#31519): A bug in handling
ref.current
dependencies has been fixed. We've added a test fixture to make sure those reactive dependencies are tracked accurately, so your components behave just as they should. - [compiler] Repro for mutable range edge case (#31479): An edge case involving mutable ranges and aliasing in function expressions has been addressed. Test fixtures now ensure our compiler handles these scenarios like a pro.
New Features β¨
- Export __COMPILER_RUNTIME in stable (#31540): The compiler is now part of stable releases like React 19 RC, making it more accessible for developers who want to harness its power.
- Turn on enableSiblingPrerendering in canary (#31541): We've flipped the switch on the
enableSiblingPrerendering
feature flag, paving the way for exciting new capabilities in the upcoming release candidate. - [Flight] Add initial readme to react-server package (#31464): A shiny new README for the
react-server
package is here! It covers theprerender
API for Flight, giving you a head start on implementing React Server Components.
Improvements π
- Only log component level profiling for components that actually performed work (#31522): We've streamlined component-level profiling by focusing on components that truly impact performance, reducing noise and making logs more actionable.
- Make prerendering always non-blocking with fix (#31452): Prerendering is now non-blocking, eliminating issues with infinite render loops and enhancing stability.
- Format event with "warning" yellow and prefix with "Event: " (#31536): Event logging just got a makeover with a "warning" yellow color and a consistent naming format, making it easier to track events in the rendering process.
Chore π§Ή
- (chore): copy fix in precedence error (#31524): We've corrected a typo in an error message related to
<style>
tag usage, ensuring clarity in error reporting.
That's all for now! We hope these updates make your development journey smoother and more enjoyable. Keep coding and stay awesome! π