react changelog

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 the experimental prefix, replacing the old unstable_ 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! 🚀

Included Commits

2025-01-17T17:04:02 See commit

This commit introduces a new validation feature in the React compiler that rejects calls to impure functions during rendering. Initially, this validation is disabled by default, but the plan is to refine it in the future to specifically target impure function calls made during the render process. To avoid altering the behavior of existing code, the return types of certain impure functions—such as Date.now, performance.now, and Math.random—are reported imprecisely as mutable objects rather than their actual primitive types. This allows the compiler to maintain compatibility while preparing for more precise validation in subsequent updates.

The commit includes modifications across several files, adding functionality to validate against impure functions in the rendering phase. A new validation function, validateNoImpureFunctionsInRender, checks function call signatures and identifies known impure functions, generating errors if such functions are detected during render. The implementation also allows for user-defined extensions to include additional impure functions, enhancing the flexibility of the validation process. Test cases have been added to ensure that the validation correctly identifies and rejects invalid function calls, thereby promoting best practices in React component design.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts
  • compiler/packages/babel-plugin-react-compiler/src/Validation/ValiateNoImpureFunctionsInRender.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.js
2025-01-17T18:54:11 See commit

This commit enhances the React framework by introducing support for Suspense boundaries in the server-side rendering process, specifically within the react-dom/server module. Previously, there was a limitation that prevented the use of Suspense above the <body> tag in an HTML document due to the intricacies of HTML parsing and the React rendering model. This update addresses that limitation by implementing a method to correctly serialize Suspense boundaries during rendering, prerendering, and resuming on the server. Although this change does not yet extend the support of Suspense to the client side, it lays the groundwork for future updates that will enable this functionality.

The commit also redefines the concept of "Preamble" in the context of rendering, which now includes the <html>, <head>, and <body> tags, alongside the document's head contents. This adjustment ensures that any Suspense boundaries that are defined above these tags will not disrupt the output until the boundaries are resolved. As a result, the rendering of an HTML document can include Suspense boundaries without breaking existing functionality, as no current applications utilize this feature above the <body> tag. The implementation includes various modifications across multiple files to support this new capability, enhancing the composability of Suspense in future React applications.

Files changed

  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
  • packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
  • packages/react-markup/src/ReactFizzConfigMarkup.js
  • packages/react-noop-renderer/src/ReactNoopServer.js
  • packages/react-server/src/ReactFizzServer.js
  • packages/react-server/src/forks/ReactFizzConfig.custom.js
  • scripts/error-codes/codes.json
2025-01-18T22:41:34 See commit

This commit introduces support for ESLint version 8 and above by implementing a flat plugin syntax for the eslint-plugin-react-compiler. The existing documentation was primarily based on the older ESLint configuration format, which is becoming less common as most plugins transition to the new format. The changes made include updating the exports to support a flat configuration and enhancing the README to guide users on how to utilize both the new and legacy configurations effectively.

The implementation was influenced by community discussions and existing code from related plugins. The author tested the changes by simulating the API in a recent deployment, successfully generating compiler messages that confirm the integration works as intended. The commit includes modifications to both the README and the plugin's source code to ensure users can easily adapt to the new configuration style.

Files changed

  • compiler/packages/eslint-plugin-react-compiler/README.md
  • compiler/packages/eslint-plugin-react-compiler/src/index.ts
2025-01-21T20:00:02 See commit

The commit introduces an isomorphic API for adding Transition Types in React, primarily aimed at enhancing View Transitions. This new feature allows developers to specify the cause of a transition by using the unstable_addTransitionType function, which can be called within a startTransition block. The implementation collects all transition types, allowing multiple types to be associated with a single transition. However, these types are reset after each commit, meaning that transitions triggered by components like <Suspense> will not carry over the associated transition types from previous transitions. This design aims to simplify the management of transition types, although it has some limitations regarding scoping and handling multiple roots.

Additionally, the commit provides various methods for utilizing Transition Types, including CSS integration for animations, a class-based approach for styling, and event callbacks for imperative animations. The transition types can be used in conjunction with different transition triggers, allowing for nuanced control over animations based on the transition's cause. The commit also hints at future enhancements, such as exposing transition types to useEffect, which could broaden their applicability beyond View Transitions to other animation libraries and effects. Overall, this commit significantly enriches the capabilities of React's transition handling, paving the way for more dynamic and context-aware animations.

Files changed

  • fixtures/view-transition/src/components/App.js
  • fixtures/view-transition/src/components/Page.js
  • fixtures/view-transition/src/components/Transitions.module.css
  • packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
  • packages/react-native-renderer/src/ReactFiberConfigNative.js
  • packages/react-noop-renderer/src/createReactNoop.js
  • packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
  • packages/react-reconciler/src/ReactFiberWorkLoop.js
  • packages/react-test-renderer/src/ReactFiberConfigTestHost.js
  • packages/react/index.experimental.development.js
  • packages/react/index.experimental.js
  • packages/react/index.js
  • packages/react/src/ReactClient.js
  • packages/react/src/ReactSharedInternalsClient.js
  • packages/react/src/ReactTransitionType.js
2025-01-22T14:15:48 See commit

This commit introduces support for the experimental hook experimental_useEffectEvent in the React DevTools, enabling developers to view and inspect this hook when analyzing elements within the application. The addition includes modifications to the ReactDebugHooks.js file to facilitate the registration and logging of the new hook, as well as updates to the DevTools shell to incorporate a new use case example demonstrating how to use useEffectEvent. However, due to the use of the ReactTestRenderer, a specific case could not be added as the corresponding experimental feature flag is disabled.

Additionally, the commit implements a forward-fix logic to handle the experimental prefix in hook names, replacing the previous unstable_ prefix as part of an ongoing effort to refine the API. This change is reflected in the parseHookName function, ensuring that hooks are correctly recognized and categorized within the DevTools environment. The commit ultimately enhances the debugging capabilities for developers working with experimental features in React.

Files changed

  • packages/react-debug-tools/src/ReactDebugHooks.js
  • packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
  • packages/react-devtools-shell/src/app/InspectableElements/UseEffectEvent.js
2025-01-22T17:04:59 See commit

This commit addresses a bug in the React compiler related to the handling of JSXText when brackets are present in the text. Specifically, it modifies a regular expression to correctly identify when a JSX text child requires an expression container, now accounting for both curly braces and angle brackets. This fix resolves an issue that was blocking the LlamaIndex product, as detailed in issue #32137.

Additionally, the commit includes new test cases to ensure that the fix works as intended. The tests demonstrate that when a string containing {pageNumber} is used within a JSX element, it is correctly rendered without causing errors. The changes made to the code and the addition of test cases signify a thorough approach to ensuring the reliability of the JSX text handling in the React compiler.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-bracket-in-text.jsx
2025-01-22T19:22:35 See commit

This commit addresses an issue related to JSX escape sequences in the Babel generator by introducing a fallback mechanism that utilizes JSXExpressionContainer for strings that may contain escape sequences, specifically a single backslash. This change is a response to a reported problem in the React repository and builds upon a previous pull request aimed at enhancing JSX handling. The modification ensures that strings with potential escape characters are correctly parsed and represented in the generated code.

The changes involve updates to the regex pattern used for identifying strings that require an expression container, as well as adjustments to the JSX attributes in test fixtures to reflect this new handling. By encapsulating strings with escape sequences in curly braces, the commit improves the robustness of JSX code generation, thereby preventing potential rendering issues in React components. Overall, this patch enhances the reliability of JSX syntax processing in Babel's compilation process.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md
2025-01-22T20:02:51 See commit

This commit addresses an issue with the type annotation for the Array.map method in the React compiler, specifically correcting its effect on function references. The previous implementation incorrectly annotated the restParam of Array.map as Effect.Read, which failed to account for the potential invocation of the mapping function, thereby not capturing the necessary replay of effects. The commit updates the annotation to Effect.ConditionallyMutate, indicating that the effects of the function may need to be replayed during execution, which is crucial for maintaining correct behavior in scenarios where the mapping function modifies state.

Additionally, the commit introduces a new test fixture that demonstrates the bug and validates the fix by showcasing the differences in evaluator results when the effects are not properly accounted for. This ensures that the compiler correctly handles the mutating effects of functions passed to Array.map, ultimately leading to more reliable and predictable outcomes in React applications.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mixedreadonly-mutating-map.js
2025-01-22T22:09:41 See commit

The commit titled "Move effect dep inference tests to infer-effect-dependencies directory" focuses on organizing the codebase by relocating effect dependency inference tests into a dedicated directory. This restructuring aims to enhance clarity and accessibility, making it easier for developers to identify and understand the relationship among these tests.

The changes involve the physical relocation of the test files, thereby streamlining the testing framework and improving overall project organization. This adjustment is expected to facilitate better maintenance and collaboration within the development team.

Files changed