diff --git a/package.json b/package.json index 0efe373e29e..c2a84b1ea29 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", - "babel-plugin-react-compiler": "^19.1.0-rc.3", + "babel-plugin-react-compiler": "^1.0.0", "chalk": "4.1.2", "eslint": "7.x", "eslint-config-next": "12.0.3", diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 96fa8802a0e..9957b8227e1 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -28,7 +28,7 @@ React Compiler automatically optimizes your React application at build time. Rea Without the compiler, you need to manually memoize components and values to optimize re-renders: -```js {expectedErrors: {'react-compiler': [4]}} +```js import { useMemo, useCallback, memo } from 'react'; const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 39a1dc74045..76e58e30725 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -1106,7 +1106,7 @@ Remove the state variable and the Effect, and instead add a `useMemo` call to ca -```js {expectedErrors: {'react-compiler': [8]}} +```js import { useState, useMemo } from 'react'; import { initialTodos, createTodo, getVisibleTodos } from './todos.js'; diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md index 55b63b3116a..33491549993 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md @@ -78,7 +78,7 @@ function Component({selectedId, items}) { Examples of correct code for this rule: -```js {expectedErrors: {'react-compiler': [8]}} +```js // ✅ setState in an effect is fine if the value comes from a ref function Tooltip() { const ref = useRef(null); diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 4521dfa479b..819184439fc 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -398,8 +398,7 @@ Here is a complete example you can play with: } ``` -{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */} -```js {expectedErrors: {'react-compiler': [15]}} src/App.js +```js import { useRef, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import { createMapWidget, addPopupToMapWidget } from './map-widget.js'; diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index e562e623ae1..083d4e052ca 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -87,8 +87,7 @@ To do this, you need to render in two passes: **All of this needs to happen before the browser repaints the screen.** You don't want the user to see the tooltip moving. Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen: -{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */} -```js {expectedErrors: {'react-compiler': [7]}} {5-8} +```js function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet @@ -188,8 +187,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) { } ``` -{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */} -```js {expectedErrors: {'react-compiler': [11]}} src/Tooltip.js active +```js import { useRef, useLayoutEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import TooltipContainer from './TooltipContainer.js'; @@ -339,8 +337,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) { } ``` -{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */} -```js {expectedErrors: {'react-compiler': [11]}} src/Tooltip.js active +```js import { useRef, useLayoutEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import TooltipContainer from './TooltipContainer.js'; @@ -487,8 +484,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) { } ``` -{/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */} -```js {expectedErrors: {'react-compiler': [11]}} src/Tooltip.js active +```js import { useRef, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import TooltipContainer from './TooltipContainer.js'; diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index bbb2ad622dd..e505622db70 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -225,8 +225,7 @@ export default function App() { ``` -{/* TODO(@poteto) - investigate potential false positives in react compiler validation */} -```js {expectedErrors: {'react-compiler': [5]}} src/TodoList.js active +```js import { useMemo } from 'react'; import { filterTodos } from './utils.js' diff --git a/yarn.lock b/yarn.lock index b8480f1c522..5b7d7bf9693 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2273,10 +2273,10 @@ babel-plugin-dynamic-import-node@^2.3.3: dependencies: object.assign "^4.1.0" -babel-plugin-react-compiler@^19.1.0-rc.3: - version "19.1.0-rc.3" - resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.1.0-rc.3.tgz#45e5a282a2460b3701971e5eb8310a90a7919022" - integrity sha512-mjRn69WuTz4adL0bXGx8Rsyk1086zFJeKmes6aK0xPuK3aaXmDJdLHqwKKMrpm6KAI1MCoUK72d2VeqQbu8YIA== +babel-plugin-react-compiler@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz#bdf7360a23a4d5ebfca090255da3893efd07425f" + integrity sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw== dependencies: "@babel/types" "^7.26.0"