diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 4ebfa3eb3..5e1835702 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -474,7 +474,7 @@ h2 { font-size: 20px; } -```js {expectedErrors: {'react-compiler': [5]}} +```js let guest = 0; function Cup() { diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index ac061c83f..7c9e791ae 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -201,7 +201,7 @@ Effect হল React এর জগত থেকে একটি escape hatch। উদাহরণস্বরূপ, একটা state এর উপর নির্ভর করে আরেকটা state পরিবর্তন করতে আপনার Effect এর প্রয়োজন নেইঃ -```js {expectedErrors: {'react-compiler': [8]}} {5-9} +```js {5-9} function Form() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 53ea148c9..084099ae0 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -93,7 +93,7 @@ React এর রেন্ডারিং প্রসেস সবসময় ব -```js {expectedErrors: {'react-compiler': [5]}} +```js let guest = 0; function Cup() { @@ -380,7 +380,7 @@ The buggy code is in `Profile.js`. Make sure you read it all from top to bottom! -```js {expectedErrors: {'react-compiler': [7]}} src/Profile.js +```js src/Profile.js import Panel from './Panel.js'; import { getImageUrl } from './utils.js'; @@ -602,7 +602,7 @@ export default function StoryTray({ stories }) { } ``` -```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; @@ -698,7 +698,7 @@ export default function StoryTray({ stories }) { } ``` -```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; @@ -790,7 +790,7 @@ export default function StoryTray({ stories }) { } ``` -```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index 72a2e7755..3dc9a75f0 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -1131,7 +1131,7 @@ If you see a linter rule being suppressed, remove the suppression! That's where -```js {expectedErrors: {'react-compiler': [16]}} +```js import { useState, useEffect } from 'react'; export default function App() { @@ -1374,7 +1374,7 @@ export default function App() { } ``` -```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active +```js src/ChatRoom.js active import { useState, useEffect } from 'react'; export default function ChatRoom({ roomId, createConnection }) { diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 041fae355..11d398d23 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -704,7 +704,7 @@ Here, the `MyTextField` component function is defined *inside* `MyComponent`: -```js {expectedErrors: {'react-compiler': [7]}} +```js import { useState } from 'react'; export default function MyComponent() { diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 96fa8802a..9957b8227 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/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 61ab4d388..29175e083 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -211,7 +211,7 @@ export default function Counter() { -```js {expectedErrors: {'react-compiler': [13]}} +```js import { useRef } from 'react'; export default function Counter() { @@ -313,7 +313,7 @@ console.log(ref.current); // 5 -```js {expectedErrors: {'react-compiler': [10]}} +```js import { useState } from 'react'; export default function Chat() { @@ -418,7 +418,7 @@ export default function Chat() { -```js {expectedErrors: {'react-compiler': [10]}} +```js import { useRef } from 'react'; export default function Toggle() { diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 7ab6dbc1f..9a848862a 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -303,7 +303,7 @@ Suppressing the linter leads to very unintuitive bugs that are hard to find and -```js {expectedErrors: {'react-compiler': [14]}} +```js import { useState, useEffect } from 'react'; export default function Timer() { @@ -794,7 +794,7 @@ It is important to declare it as a dependency! This ensures, for example, that i -```js {expectedErrors: {'react-compiler': [10]}} +```js import { useState, useEffect } from 'react'; import { createConnection } from './chat.js'; diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md index 78474217c..17bd087ed 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -546,7 +546,7 @@ Clicking this button is supposed to switch the page background between white and -```js {expectedErrors: {'react-compiler': [5, 7]}} +```js export default function LightSwitch() { function handleClick() { let bodyStyle = document.body.style; diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index fd603c395..03223183b 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -711,7 +711,7 @@ Here, `url` inside `onVisit` corresponds to the *latest* `url` (which could have In the existing codebases, you may sometimes see the lint rule suppressed like this: -```js {expectedErrors: {'react-compiler': [8]}} {7-9} +```js {7-9} function Page({ url }) { const { items } = useContext(ShoppingCartContext); const numberOfItems = items.length; @@ -735,7 +735,7 @@ Can you see why? -```js {expectedErrors: {'react-compiler': [16]}} +```js import { useState, useEffect } from 'react'; export default function App() { @@ -990,7 +990,7 @@ To fix this code, it's enough to follow the rules. ``` -```js {expectedErrors: {'react-compiler': [14]}} +```js import { useState, useEffect } from 'react'; export default function Timer() { diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 8b1f266df..738b4eb60 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -23,7 +23,7 @@ title: "State: কম্পোনেন্ট এর মেমোরি" -```js {expectedErrors: {'react-compiler': [7]}} +```js import { sculptureList } from './data.js'; export default function Gallery() { @@ -1228,7 +1228,7 @@ img { width: 120px; height: 120px; } -```js {expectedErrors: {'react-compiler': [6]}} +```js export default function Form() { let firstName = ''; let lastName = ''; @@ -1336,7 +1336,7 @@ _কোথায়_ হুক কল করা যাবে, সেটার ক -```js {expectedErrors: {'react-compiler': [9]}} +```js import { useState } from 'react'; export default function FeedbackForm() { diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 7b1f4045f..55018a9a5 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -95,7 +95,7 @@ function VideoPlayer({ src, isPlaying }) { -```js {expectedErrors: {'react-compiler': [7, 9]}} +```js import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { @@ -1469,7 +1469,7 @@ body { {/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */} -```js {expectedErrors: {'react-compiler': [9]}} src/App.js +```js src/App.js import { useState, useEffect } from 'react'; import { fetchBio } from './api.js'; @@ -1543,7 +1543,7 @@ export async function fetchBio(person) { {/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */} -```js {expectedErrors: {'react-compiler': [9]}} src/App.js +```js src/App.js import { useState, useEffect } from 'react'; import { fetchBio } from './api.js'; diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index ca6585145..93ea93bd2 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -55,7 +55,7 @@ This example holds an object in state to represent the current pointer position. -```js {expectedErrors: {'react-compiler': [11]}} +```js import { useState } from 'react'; export default function MovingDot() { @@ -209,7 +209,7 @@ These input fields don't work because the `onChange` handlers mutate the state: -```js {expectedErrors: {'react-compiler': [11, 15, 19]}} +```js import { useState } from 'react'; export default function Form() { @@ -832,7 +832,7 @@ Your task is to fix all of these bugs. As you fix them, explain why each of them -```js {expectedErrors: {'react-compiler': [11]}} +```js import { useState } from 'react'; export default function Scoreboard() { @@ -988,7 +988,7 @@ If something unexpected changes, there is a mutation. Find the mutation in `App. -```js {expectedErrors: {'react-compiler': [17]}} src/App.js +```js src/App.js import { useState } from 'react'; import Background from './Background.js'; import Box from './Box.js'; @@ -1293,7 +1293,7 @@ This is the same buggy example as in the previous challenge. This time, fix the -```js {expectedErrors: {'react-compiler': [18]}} src/App.js +```js src/App.js import { useState } from 'react'; import { useImmer } from 'use-immer'; import Background from './Background.js'; 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 39a1dc740..88e490e1a 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -34,7 +34,7 @@ To help you gain the right intuition, let's look at some common concrete example Suppose you have a component with two state variables: `firstName` and `lastName`. You want to calculate a `fullName` from them by concatenating them. Moreover, you'd like `fullName` to update whenever `firstName` or `lastName` change. Your first instinct might be to add a `fullName` state variable and update it in an Effect: -```js {expectedErrors: {'react-compiler': [8]}} {5-9} +```js {5-9} function Form() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); @@ -66,7 +66,7 @@ function Form() { This component computes `visibleTodos` by taking the `todos` it receives by props and filtering them according to the `filter` prop. You might feel tempted to store the result in state and update it from an Effect: -```js {expectedErrors: {'react-compiler': [7]}} {4-8} +```js {4-8} function TodoList({ todos, filter }) { const [newTodo, setNewTodo] = useState(''); @@ -165,7 +165,7 @@ Also note that measuring performance in development will not give you the most a This `ProfilePage` component receives a `userId` prop. The page contains a comment input, and you use a `comment` state variable to hold its value. One day, you notice a problem: when you navigate from one profile to another, the `comment` state does not get reset. As a result, it's easy to accidentally post a comment on a wrong user's profile. To fix the issue, you want to clear out the `comment` state variable whenever the `userId` changes: -```js {expectedErrors: {'react-compiler': [6]}} {4-7} +```js {4-7} export default function ProfilePage({ userId }) { const [comment, setComment] = useState(''); @@ -208,7 +208,7 @@ Sometimes, you might want to reset or adjust a part of the state on a prop chang This `List` component receives a list of `items` as a prop, and maintains the selected item in the `selection` state variable. You want to reset the `selection` to `null` whenever the `items` prop receives a different array: -```js {expectedErrors: {'react-compiler': [7]}} {5-8} +```js {5-8} function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selection, setSelection] = useState(null); @@ -819,7 +819,7 @@ Simplify this component by removing all the unnecessary state and Effects. -```js {expectedErrors: {'react-compiler': [12, 16, 20]}} +```js import { useState, useEffect } from 'react'; import { initialTodos, createTodo } from './todos.js'; @@ -1022,7 +1022,7 @@ One solution is to add a `useMemo` call to cache the visible todos. There is als -```js {expectedErrors: {'react-compiler': [11]}} +```js import { useState, useEffect } from 'react'; import { initialTodos, createTodo, getVisibleTodos } from './todos.js'; @@ -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'; @@ -1363,7 +1363,7 @@ export default function ContactList({ } ``` -```js {expectedErrors: {'react-compiler': [8, 9]}} src/EditContact.js active +```js src/EditContact.js active import { useState, useEffect } from 'react'; export default function EditContact({ savedContact, onSave }) { diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md index 537903abd..84dd3b237 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md @@ -16,7 +16,7 @@ Defining components or hooks inside other functions creates new instances on eve Examples of incorrect code for this rule: -```js {expectedErrors: {'react-compiler': [14]}} +```js // ❌ Factory function creating components function createComponent(defaultValue) { return function Component() { diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md index 830098e5b..08bbdc55c 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md @@ -16,7 +16,7 @@ Try/catch blocks can't catch errors that happen during React's rendering process Examples of incorrect code for this rule: -```js {expectedErrors: {'react-compiler': [4]}} +```js // ❌ Try/catch won't catch render errors function Parent() { try { @@ -48,7 +48,7 @@ function Parent() { The `use` hook doesn't throw errors in the traditional sense, it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run. -```js {expectedErrors: {'react-compiler': [5]}} +```js // ❌ Try/catch around `use` hook function Component({promise}) { try { diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md index af8aacc61..af3357666 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md @@ -57,7 +57,7 @@ function Component() { Calling `Date.now()` during render makes your component impure: -```js {expectedErrors: {'react-compiler': [3]}} +```js // ❌ Wrong: Time changes every render function Clock() { return
Current time: {Date.now()}
; 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 8c6a7cb47..64fa5c655 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 @@ -71,7 +71,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/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md index 61852990a..81de39d8b 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md @@ -16,7 +16,7 @@ Calling `setState` during render triggers another render before the current one ### Invalid {/*invalid*/} -```js {expectedErrors: {'react-compiler': [4]}} +```js // ❌ setState directly in render function Component({value}) { const [count, setCount] = useState(0); diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md index 709303612..5667e356e 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md @@ -61,7 +61,7 @@ function Parent({type}) { You might define components inside to access local state: -```js {expectedErrors: {'react-compiler': [13]}} +```js // ❌ Wrong: Inner component to access parent state function Parent() { const [theme, setTheme] = useState('light'); diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md index a3eefcdb2..2931cff6c 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md @@ -60,7 +60,7 @@ function Component() { You might need to evaluate user-provided code: -```js {expectedErrors: {'react-compiler': [3]}} +```js // ❌ Wrong: eval in component function Calculator({expression}) { const result = eval(expression); // Unsafe and unoptimizable diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md index 54bbe1579..49e654ff7 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md @@ -16,7 +16,7 @@ Validates usage of the `useMemo` hook without a return value. See [`useMemo` doc Examples of incorrect code for this rule: -```js {expectedErrors: {'react-compiler': [3]}} +```js // ❌ No return value function Component({ data }) { const processed = useMemo(() => { @@ -50,7 +50,7 @@ function Component({ data }) { You might try to use `useMemo` for side effects: {/* TODO(@poteto) fix compiler validation to check for unassigned useMemos */} -```js {expectedErrors: {'react-compiler': [4]}} +```js // ❌ Wrong: Side effects in useMemo function Component({user}) { // No return value, just side effect diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 4990652aa..24f87045c 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -297,7 +297,7 @@ hydrateRoot(document.getElementById('root'), ); ``` {/* kind of an edge case, seems fine to use this hack here */} -```js {expectedErrors: {'react-compiler': [7]}} src/App.js active +```js src/App.js active import { useState, useEffect } from "react"; export default function App() { diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 80ec0581c..e41c66b66 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -398,7 +398,7 @@ return ( ``` {/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */} -```js {expectedErrors: {'react-compiler': [15]}} src/App.js +```js src/App.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/cache.md b/src/content/reference/react/cache.md index 7393a7e15..466cd0c77 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -322,7 +322,7 @@ All mentioned APIs offer memoization but the difference is what they're intended In general, you should use [`useMemo`](/reference/react/useMemo) for caching an expensive computation in a Client Component across renders. As an example, to memoize a transformation of data within a component. -```jsx {expectedErrors: {'react-compiler': [4]}} {4} +```jsx {4} 'use client'; function WeatherReport({record}) { diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index 9a1520f44..5968e1ca8 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -207,7 +207,7 @@ The difference is in *what* they're letting you cache: If you're already familiar with [`useMemo`,](/reference/react/useMemo) you might find it helpful to think of `useCallback` as this: -```js {expectedErrors: {'react-compiler': [3]}} +```js // Simplified implementation (inside React) function useCallback(fn, dependencies) { return useMemo(() => fn, dependencies); @@ -310,7 +310,7 @@ function post(url, data) { } ``` -```js {expectedErrors: {'react-compiler': [7, 8]}} src/ShippingForm.js +```js src/ShippingForm.js import { memo, useState } from 'react'; const ShippingForm = memo(function ShippingForm({ onSubmit }) { @@ -449,7 +449,7 @@ function post(url, data) { } ``` -```js {expectedErrors: {'react-compiler': [7, 8]}} src/ShippingForm.js +```js src/ShippingForm.js import { memo, useState } from 'react'; const ShippingForm = memo(function ShippingForm({ onSubmit }) { @@ -868,7 +868,7 @@ When you find which dependency is breaking memoization, either find a way to rem Suppose the `Chart` component is wrapped in [`memo`](/reference/react/memo). You want to skip re-rendering every `Chart` in the list when the `ReportList` component re-renders. However, you can't call `useCallback` in a loop: -```js {expectedErrors: {'react-compiler': [6]}} {5-14} +```js {5-14} function ReportList({ items }) { return (
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index bf716b173..e1e687cfe 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -669,7 +669,7 @@ export default function App() { } ``` -```js {expectedErrors: {'react-compiler': [19, 20]}} src/SlowList.js +```js src/SlowList.js import { memo } from 'react'; const SlowList = memo(function SlowList({ text }) { @@ -746,7 +746,7 @@ export default function App() { } ``` -```js {expectedErrors: {'react-compiler': [19, 20]}} src/SlowList.js +```js src/SlowList.js import { memo } from 'react'; const SlowList = memo(function SlowList({ text }) { diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index a250bb15a..034fda357 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -929,7 +929,7 @@ Note the `ignore` variable which is initialized to `false`, and is set to `true` {/* TODO(@poteto) - investigate potential false positives in react compiler validation */} -```js {expectedErrors: {'react-compiler': [9]}} src/App.js +```js src/App.js import { useState, useEffect } from 'react'; import { fetchBio } from './api.js'; @@ -1740,7 +1740,7 @@ In rare cases, you might need to display different content on the client. For ex {/* TODO(@poteto) - investigate potential false positives in react compiler validation */} -```js {expectedErrors: {'react-compiler': [5]}} +```js function MyComponent() { const [didMount, setDidMount] = useState(false); diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md index 76be7b059..8ad3e9f3c 100644 --- a/src/content/reference/react/useLayoutEffect.md +++ b/src/content/reference/react/useLayoutEffect.md @@ -88,7 +88,7 @@ function Tooltip() { **এই সবকিছু ব্রাউজারের স্ক্রিন পুনরায় পেইন্ট হওয়ার আগে ঘটতে হবে।** আপনি নিশ্চয়ই চান না যে ব্যবহারকারী টুলটিপটি সরতে দেখুক। তাই ব্রাউজারের স্ক্রিন পুনরায় পেইন্ট হওয়ার আগে লেআউটের মাপজোক সম্পন্ন করতে `useLayoutEffect` কল করুন। {/* TODO(@poteto) - fixed by https://github.com/facebook/react/pull/34462. need a new release */} -```js {expectedErrors: {'react-compiler': [7]}} {5-8} +```js {5-8} function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet @@ -189,7 +189,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 src/Tooltip.js active import { useRef, useLayoutEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import TooltipContainer from './TooltipContainer.js'; @@ -340,7 +340,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 src/Tooltip.js active import { useRef, useLayoutEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import TooltipContainer from './TooltipContainer.js'; @@ -488,7 +488,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 src/Tooltip.js active import { useRef, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import TooltipContainer from './TooltipContainer.js'; @@ -631,7 +631,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) { } ``` -```js {expectedErrors: {'react-compiler': [10, 11]}} src/Tooltip.js active +```js src/Tooltip.js active 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 1a6c26cb1..752ac3d27 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -226,7 +226,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 src/TodoList.js active import { useMemo } from 'react'; import { filterTodos } from './utils.js' @@ -718,7 +718,7 @@ export default function TodoList({ todos, theme, tab }) { } ``` -```js {expectedErrors: {'react-compiler': [5, 6]}} src/List.js +```js src/List.js import { memo } from 'react'; const List = memo(function List({ items }) { @@ -856,7 +856,7 @@ export default function TodoList({ todos, theme, tab }) { } ``` -```js {expectedErrors: {'react-compiler': [5, 6]}} src/List.js +```js src/List.js import { memo } from 'react'; const List = memo(function List({ items }) { @@ -1370,7 +1370,7 @@ Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ... ধরুন `Chart` কম্পোনেন্টটি [`memo`](/reference/react/memo)-এ মোড়ানো। আপনি চান `ReportList` কম্পোনেন্ট পুনরায় রেন্ডার হলে লিস্টে প্রতিটি `Chart` রি-রেন্ডারিং না হক। তবে, আপনি একটি লুপে মদ্ধে `useMemo` কল করতে পারবেন না: -```js {expectedErrors: {'react-compiler': [6]}} {5-11} +```js {5-11} function ReportList({ items }) { return (
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md index e87ef6b8a..8ab53aef3 100644 --- a/src/content/reference/react/useRef.md +++ b/src/content/reference/react/useRef.md @@ -197,7 +197,7 @@ React expects that the body of your component [behaves like a pure function](/le Reading or writing a ref **during rendering** breaks these expectations. -```js {expectedErrors: {'react-compiler': [4]}} {3-4,6-7} +```js {3-4,6-7} function MyComponent() { // ... // 🚩 Don't write a ref during rendering diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index fc5384c4b..4d38bacac 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -682,7 +682,7 @@ export default function AboutTab() { } ``` -```js {expectedErrors: {'react-compiler': [19, 20]}} src/PostsTab.js +```js src/PostsTab.js import { memo } from 'react'; const PostsTab = memo(function PostsTab() { @@ -837,7 +837,7 @@ export default function AboutTab() { } ``` -```js {expectedErrors: {'react-compiler': [19, 20]}} src/PostsTab.js +```js src/PostsTab.js import { memo } from 'react'; const PostsTab = memo(function PostsTab() { diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index 2937dc210..6da6d49bb 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -209,7 +209,7 @@ You can think of the props and state values as snapshots that are updated after ### Don't mutate Props {/*props*/} Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug as it may or may not work depending on the circumstances. -```js {expectedErrors: {'react-compiler': [2]}} {2} +```js {2} function Post({ item }) { item.url = new Url(item.url, base); // 🔴 Bad: never mutate props directly return {item.title}; @@ -232,7 +232,7 @@ const [stateVariable, setter] = useState(0); Rather than updating the state variable in-place, we need to update it using the setter function that is returned by `useState`. Changing values on the state variable doesn't cause the component to update, leaving your users with an outdated UI. Using the setter function informs React that the state has changed, and that we need to queue a re-render to update the UI. -```js {expectedErrors: {'react-compiler': [2, 5]}} {5} +```js {5} function Counter() { const [count, setCount] = useState(0); @@ -270,7 +270,7 @@ function Counter() { Once values are passed to a hook, you should not modify them. Like props in JSX, values become immutable when passed to a hook. -```js {expectedErrors: {'react-compiler': [4]}} {4} +```js {4} function useIconStyle(icon) { const theme = useContext(ThemeContext); if (icon.enabled) { @@ -331,7 +331,7 @@ Don't mutate values after they've been used in JSX. Move the mutation to before When you use JSX in an expression, React may eagerly evaluate the JSX before the component finishes rendering. This means that mutating values after they've been passed to JSX can lead to outdated UIs, as React won't know to update the component's output. -```js {expectedErrors: {'react-compiler': [4]}} {4} +```js {4} function Page({ colour }) { const styles = { colour, size: "large" }; const header =
; diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md index 03354ad5a..3d865b4f2 100644 --- a/src/content/reference/rules/react-calls-components-and-hooks.md +++ b/src/content/reference/rules/react-calls-components-and-hooks.md @@ -21,7 +21,7 @@ function BlogPost() { } ``` -```js {expectedErrors: {'react-compiler': [2]}} {2} +```js {2} function BlogPost() { return {Article()}; // 🔴 Bad: Never call them directly } @@ -51,7 +51,7 @@ Breaking this rule will cause React to not automatically optimize your component Hooks should be as "static" as possible. This means you shouldn't dynamically mutate them. For example, this means you shouldn't write higher order Hooks: -```js {expectedErrors: {'react-compiler': [2, 3]}} {2} +```js {2} function ChatInput() { const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks const data = useDataWithLogging(); @@ -74,7 +74,7 @@ function useDataWithLogging() { Hooks should also not be dynamically used: for example, instead of doing dependency injection in a component by passing a Hook as a value: -```js {expectedErrors: {'react-compiler': [2]}} {2} +```js {2} function ChatInput() { return