mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 20:53:08 +00:00
Merge 8d1b0d7abc into sapling-pr-archive-poteto
This commit is contained in:
@@ -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 }) {
|
||||
|
||||
@@ -1106,7 +1106,7 @@ Remove the state variable and the Effect, and instead add a `useMemo` call to ca
|
||||
|
||||
<Sandpack>
|
||||
|
||||
```js {expectedErrors: {'react-compiler': [8]}}
|
||||
```js
|
||||
import { useState, useMemo } from 'react';
|
||||
import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user