You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/add-react-to-an-existing-project.md
-4Lines changed: 0 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,11 +24,7 @@ title: اضافه کردن ریاکت به یک پروژه موجود
24
24
2.**`/some-app` را بهعنوان *مسیر پایه*** در پیکربندی فریمورک خود مشخص کنید (راهنما: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath)، [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
25
25
3.**سرور یا پروکسی خود را پیکربندی کنید** تا همه درخواستهای زیر مسیر `/some-app/` توسط اپلیکیشن ریاکت شما مدیریت شوند.
26
26
27
-
<<<<<<< HEAD
28
27
این کار تضمین میکند که بخش ریاکت اپلیکیشن شما میتواند از [بهترین شیوههای موجود](/learn/build-a-react-app-from-scratch#consider-using-a-framework) که در این فریمورکها تعبیه شدهاند بهرهمند شود.
29
-
=======
30
-
This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
31
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
32
28
33
29
بسیاری از فریمورکهای مبتنی بر ریاکت فولاستک هستند و به اپلیکیشن ریاکت شما اجازه میدهند از قابلیتهای سرور استفاده کند. با این حال، حتی اگر نتوانید یا نخواهید جاوااسکریپت را روی سرور اجرا کنید، میتوانید از همان رویکرد استفاده کنید. در این حالت، خروجی HTML/CSS/JS را (خروجی [`next export`](https://nextjs.org/docs/advanced-features/static-html-export) در Next.js یا حالت پیشفرض در Gatsby) در مسیر `/some-app/` سرو کنید.
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler/installation.md
-13Lines changed: 0 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -176,20 +176,7 @@ Install the ESLint plugin:
176
176
npm install -D eslint-plugin-react-hooks@rc
177
177
</TerminalBlock>
178
178
179
-
<<<<<<< HEAD
180
-
Then enable the compiler rule in your ESLint configuration:
181
-
182
-
```js {3}
183
-
// .eslintrc.js
184
-
module.exports= {
185
-
rules: {
186
-
'react-hooks/react-compiler':'error',
187
-
},
188
-
};
189
-
```
190
-
=======
191
179
If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed.
192
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
193
180
194
181
The ESLint rule will:
195
182
- Identify violations of the [Rules of React](/reference/rules)
@@ -67,7 +65,6 @@ React Compiler is able to optimize this correctly with or without the arrow func
67
65
68
66
</Note>
69
67
70
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
71
68
### After React Compiler {/*after-react-compiler*/}
72
69
73
70
With React Compiler, you write the same code without manual memoization:
@@ -92,11 +89,7 @@ function ExpensiveComponent({ data, onClick }) {
92
89
93
90
_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_
94
91
95
-
<<<<<<< HEAD
96
-
React Compiler automatically applies the equivalent optimizations, ensuring your app only re-renders when necessary.
97
-
=======
98
92
React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary.
99
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
100
93
101
94
<DeepDive>
102
95
#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
@@ -176,11 +169,7 @@ Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https
176
169
177
170
## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
178
171
179
-
<<<<<<< HEAD
180
-
If you are using React Compiler, [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo) can be removed. React Compiler adds automatic memoization more precisely and granularly than is possible with these hooks. If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
181
-
=======
182
172
React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
183
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
184
173
185
174
This is done out of caution as a common anti-pattern with manual memoization is using it for correctness. This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected.
Copy file name to clipboardExpand all lines: src/content/reference/react/Activity.md
-20Lines changed: 0 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -45,11 +45,7 @@ While hidden, children still re-render in response to new props, albeit at a low
45
45
46
46
When the boundary becomes <CodeStepstep={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and re-create their Effects.
47
47
48
-
<<<<<<< HEAD
49
-
In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring hidden content has no unwanted side effects.
50
-
=======
51
48
In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects.
52
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
53
49
54
50
[See more examples below.](#usage)
55
51
@@ -60,23 +56,15 @@ In this way, Activity can be thought of as a mechanism for rendering "background
60
56
61
57
#### Caveats {/*caveats*/}
62
58
63
-
<<<<<<< HEAD
64
-
- When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
65
-
=======
66
59
- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation.
67
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
68
60
69
61
---
70
62
71
63
## Usage {/*usage*/}
72
64
73
65
### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
74
66
75
-
<<<<<<< HEAD
76
-
Typically in React, when you want to conditionally show or hide a component, you mount and unmount it:
77
-
=======
78
67
In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition:
79
-
>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
80
68
81
69
```jsx
82
70
{isShowingSidebar && (
@@ -94,19 +82,11 @@ When you hide a component using an Activity boundary instead, React will "save"
94
82
</Activity>
95
83
```
96
84
97
-
<<<<<<< HEAD
98
-
This makes it possible to restore components to their previous state.
99
-
100
-
The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
101
-
102
-
Try expanding the Overview section, then toggling the sidebar closed and open:
103
-
=======
104
85
This makes it possible to hide and then later restore components in the state they were previously in.
105
86
106
87
The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
107
88
108
89
Try expanding the Overview section, and then toggling the sidebar closed then open:
0 commit comments