react changelog

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 new SuspenseActionException 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 to useResourceEffect, 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 new Effect type, currently an alias for SimpleEffect, 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 causing ref.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
    The enableUseResourceEffectHook 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 in useResourceEffect 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! 🎉👩‍💻👨‍💻

Included Commits

2024-11-15T18:05:55 See commit

This commit addresses a bug in the React compiler related to the handling of ref.current dependencies. Previously, the code incorrectly filtered out these dependencies, which could lead to non-reactivity in components that utilize refs. The fix ensures that dependencies on ref.current are always taken into account, as the outer ref value may be reactive. The changes also involve a refinement in the handling of reactive identifiers, specifically for cases where useRef calls are involved. This adjustment helps maintain the correct reactivity in scenarios where refs are conditionally assigned.

In addition to the code changes, the commit introduces new test fixtures that demonstrate the correct behavior of reactive refs. These tests confirm that the system now properly tracks dependencies on ref.current and handles the potential for reactivity in those values. Overall, the modifications enhance the reliability of the React compiler's dependency tracking, ensuring that components using refs function correctly in a reactive context.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/PropagateScopeDependenciesHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReactiveIdentifiers.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.tsx
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.tsx
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.js
2024-11-15T22:49:31 See commit

This commit introduces the initial type definition for a new dispatcher function called useResourceEffect within the React framework. The new type is added to the existing HookType and Dispatcher definitions in the ReactInternalTypes.js and ReactHooks.js files. The useResourceEffect function is designed to manage resources by providing a create function for resource creation, an optional update function for resource updates, and a destroy function for cleanup, along with their respective dependency arrays.

Although the useResourceEffect function is defined, its implementation is currently not provided, as indicated by the error thrown when the function is called. This scaffolding sets the groundwork for future enhancements where useResourceEffect will likely be integrated as an overload into existing hooks like useEffect, thereby expanding the capabilities of React's hooks system.

Files changed

  • packages/react-reconciler/src/ReactInternalTypes.js
  • packages/react/src/ReactHooks.js
2024-11-15T22:49:42 See commit

This commit introduces a new feature flag called enableUseResourceEffectHook, which is intended for managing resources more effectively within React's effect hooks. The addition of this flag is part of ongoing efforts to enhance React's functionality and performance, particularly in managing resource-related operations in a more streamlined manner. The flag is implemented across various files, indicating its applicability in different contexts within the React ecosystem.

The changes made in this commit include modifications to several files that handle React feature flags, ensuring that the enableUseResourceEffectHook flag is consistently integrated across different environments, including native and open-source versions. The flag is initially set to false, suggesting that it is still in the experimental phase and not yet enabled for general use. This addition highlights React's commitment to evolving its API and improving developer experience through experimental features.

Files changed

  • packages/shared/ReactFeatureFlags.js
  • packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.native-oss.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
  • packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
  • packages/shared/forks/ReactFeatureFlags.www-dynamic.js
  • packages/shared/forks/ReactFeatureFlags.www.js
2024-11-15T22:50:50 See commit

This commit introduces a new Effect type in the React codebase, which currently acts as an alias for the existing SimpleEffect type. This change is part of a broader initiative to enhance the effect management system within React, setting the stage for future developments that will expand the functionality and capabilities of effects in the framework.

The modifications primarily occur in the ReactFiberHooks.js file, where the Effect type is redefined to point to SimpleEffect, and several related changes are made to accommodate this new structure. The commit lays the groundwork for further enhancements in the effect handling mechanism, which will be implemented in subsequent updates.

Files changed

  • packages/react-reconciler/src/ReactFiberHooks.js
2024-11-15T22:52:24 See commit

This commit introduces a new SuspenseActionException sentinel to allow React to differentiate between suspensions caused by actions and those caused by data. By utilizing this new exception, developers can track whether a suspension occurred due to an action when using the useActionState hook, rather than it being conflated with data-related suspensions. The change aims to enhance the profiling tools and improve the handling of promises in React, making it easier to manage different types of suspensions.

However, the implementation has been criticized for being overly complex, as it introduces multiple rendering passes and makes updates to the isPending flag cumbersome. The integration of useActionState with existing prewarming processes appears inefficient, as it leads to unnecessary re-renders and blocks updates even when the hook is not actively used. Overall, while the commit adds useful functionality for tracking suspensions, it also highlights potential areas for optimization in React's handling of asynchronous actions.

Files changed

  • packages/react-debug-tools/src/ReactDebugHooks.js
  • packages/react-reconciler/src/ReactChildFiber.js
  • packages/react-reconciler/src/ReactFiberHooks.js
  • packages/react-reconciler/src/ReactFiberThenable.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-server/src/ReactFizzThenable.js
  • packages/react-server/src/ReactFlightThenable.js
  • scripts/error-codes/codes.json
2024-11-18T15:16:37 See commit

This commit introduces a new experimental hook called useResourceEffect as part of ongoing early testing efforts within the React framework. The implementation is in its initial stages and is subject to significant changes or removal in the future, so users are cautioned against relying on it due to its potential instability.

In addition to the new hook, several files across the React packages have been modified, including core files related to React's reconciliation and hooks systems, as well as updates to the testing framework. The changes reflect the experimental nature of the new hook and its integration into the broader React codebase.

Files changed

  • packages/react-reconciler/src/ReactFiberCallUserSpace.js
  • packages/react-reconciler/src/ReactFiberCommitEffects.js
  • packages/react-reconciler/src/ReactFiberHooks.js
  • packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
  • packages/react/index.development.js
  • packages/react/index.experimental.development.js
  • packages/react/index.fb.js
  • packages/react/src/ReactClient.js
  • packages/react/src/ReactHooks.js
2024-11-18T15:51:16 See commit

This commit introduces support for the enableRefAsProp feature in the JSX transform within the React compiler. With this update, the implementation of ReactElement in production now includes the ref property on both element.ref and element.props.ref, aligning it with the behavior of the JSX runtime. The changes involve modifications to the InlineJsxTransform.ts file, where the handling of the ref property has been adjusted to ensure it is correctly included in the props object as well.

In addition to the code changes, the commit also updates related test cases to reflect the new behavior, ensuring that the ref property is included in the props for various components. The overall objective of this commit is to enhance consistency between the JSX transform and the React element implementation, ultimately improving the developer experience when using refs in React components.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md
2024-11-18T16:54:11 See commit

This commit introduces a reproduction case for a bug identified in the type inference system, specifically concerning the propagation of inferred types through control flow and potential type guards. The author notes that the current behavior is inconsistent with established tools like Flow and TypeScript, highlighting a discrepancy in how inferred types are handled in different environments. The commit includes detailed test cases that demonstrate the unexpected results when evaluating the types, emphasizing the need for a more robust type inference mechanism.

In addition to the test cases, the commit modifies the arrayPush function to return the modified array, rather than simply pushing values without a return. This change enhances the function's utility and aligns it with common practices in JavaScript. The commit also updates documentation to reflect the new test case and ensures that the bug is included in the skip filter for future tests, indicating an ongoing effort to address and resolve issues within the type inference system.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-type-inference-control-flow.ts
  • compiler/packages/snap/src/SproutTodoFilter.ts
  • compiler/packages/snap/src/sprout/shared-runtime.ts
2024-11-19T22:25:11 See commit

This commit enables the enableUseResourceEffectHook feature flag in the ReactFeatureFlags.test-renderer.native-fb.js file, changing its value from false to true. This modification is part of the efforts to enhance the functionality of the React framework, specifically targeting the React Native builds for Facebook (FB).

The change includes a net addition of one line and a deletion of one line, indicating a straightforward toggle of this flag. By enabling the useResourceEffect hook, developers can leverage new capabilities that may improve resource management and performance in applications built with React Native.

Files changed

  • packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
2024-11-20T21:54:41 See commit

The commit addresses a bug in the experimental useResourceEffect hook within React, which incorrectly compared dependencies when another type of effect was present before it. To resolve this issue, the author implemented a pointer to the ResourceEffect's identity during updates, ensuring that the correct dependencies are compared. Additionally, the commit unifies the separate implementations for pushing resource effects, recognizing that they are always intended to be pushed together as a single unit.

The changes involve modifications to the ReactFiberHooks.js file, where the structure for handling resource effects has been streamlined. This includes the addition of an identity field to the ResourceEffectUpdate type, and adjustments to the logic that manages these effects to ensure they are processed correctly. The commit also includes new tests that verify the correct behavior of the useResourceEffect hook in conjunction with other effects, ensuring that the expected logging occurs during various render cycles. Overall, these updates enhance the reliability and functionality of the resource effect handling in React.

Files changed

  • packages/react-reconciler/src/ReactFiberHooks.js
  • packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
  • scripts/error-codes/codes.json