Merge pull request #760 from reactjs/sync-ee770567

Sync with reactjs.org @ ee77056

Author: ntishkevich

beta/README.md

@@ -1,6 +1,6 @@
 # reactjs.org
 
-This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/).
+This repo contains the source code and documentation powering [beta.reactjs.org](https://beta.reactjs.org/).
 
 
 ## Getting started

beta/package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "v0.19.8-experimental.4",
+    "@codesandbox/sandpack-react": "v0.19.8-experimental.7",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",

beta/src/components/MDX/Sandpack/Console.tsx

@@ -106,10 +106,10 @@ export const SandpackConsole = () => {
                 <div
                   key={id}
                   className={cn(
-                    'last:border-none border-b dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono',
+                    'last:border-none border-b dark:border-gray-700 text-md p-1 pl-2 leading-6 font-mono min-h-[32px]',
                     `console-${getType(method)}`
                   )}>
-                  <span className={cn('console-message')}>
+                  <span className="console-message">
                     {data.map((msg, index) => {
                       if (typeof msg === 'string') {
                         return <span key={`${msg}-${index}`}>{msg}</span>;

beta/src/pages/learn/you-might-not-need-an-effect.md

@@ -232,9 +232,11 @@ function List({ items }) {
 }
 ```
 
-**This pattern can be hard to understand, but it’s better than updating state in an Effect.** In the above example, `setSelection` is called directly during a render. React will re-render the `List` *immediately* after it exits with a `return` statement. By that point, React hasn't rendered the `List` children or updated the DOM yet, so this lets the `List` children skip rendering the stale `selection` value. [Read more about using this pattern correctly.](/apis/usestate#storing-information-from-previous-renders)
+[Storing information from previous renders](/apis/usestate#storing-information-from-previous-renders) like this can be hard to understand, but it’s better than updating the same state in an Effect. In the above example, `setSelection` is called directly during a render. React will re-render the `List` *immediately* after it exits with a `return` statement. By that point, React hasn't rendered the `List` children or updated the DOM yet, so this lets the `List` children skip rendering the stale `selection` value.
 
-Before moving on, consider whether you can further simplify the requirements to calculate everything during rendering. For example, instead of storing (and resetting) the selected *item*, you can store the selected *item ID:*
+When you update a component during rendering, React throws away the returned JSX and immediately retries rendering. To avoid very slow cascading retries, React only lets you update the *same* component's state during a render. If you update another component's state during a render, you'll see an error. A condition like `items !== prevItems` is necessary to avoid loops. You may adjust state like this, but any other side effects (like changing the DOM or setting a timeout) should remain in event handlers or Effects to [keep your components predictable](/learn/keeping-components-pure).
+
+**Although this pattern is more efficient than an Effect, most components shouldn't need it either.** No matter how you do it, adjusting state based on props or other state makes your data flow more difficult to understand and debug. Always check whether you can [reset all state with a key](#resetting-all-state-when-a-prop-changes) or [calculate everything during rendering](#updating-state-based-on-props-or-state) instead. For example, instead of storing (and resetting) the selected *item*, you can store the selected *item ID:*
 
 ```js {3-5}
 function List({ items }) {

beta/yarn.lock

@@ -555,10 +555,10 @@
     codesandbox-import-utils "^1.2.3"
     lodash.isequal "^4.5.0"
 
-"@codesandbox/[email protected].4":
-  version "0.19.8-experimental.4"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.19.8-experimental.4.tgz#fb170bcca42b0e68175edd1510973b779504d416"
-  integrity sha512-SyfKEb6iPT4ZqQJ3wzf96OgDj1WmfvZs9tt0HHzA8InwGCPm9QWcJcQbKatEvu+S7sOBt2rxcETelLYhddn9nA==
+"@codesandbox/[email protected].7":
+  version "0.19.8-experimental.7"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.19.8-experimental.7.tgz#44724fc0cce5d470eae9d6bc757ae237b699c019"
+  integrity sha512-+zT07s7LYxWq4bQYEStZszpfQAbbqP7PukF0TlJxYbjDVDXDhikdBkxuD1hXvVA6FOPdgLuF2fdnDR5NViktwA==
   dependencies:
     "@code-hike/classer" "^0.0.0-aa6efee"
     "@codemirror/closebrackets" "^0.19.0"

content/community/conferences.md

@@ -12,37 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-
-### render(ATL) 2022 🍑 {#render-atlanta-2022} 
-June 1 - 4, 2022. Atlanta, GA, USA
-
-[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
-
-### React Day Bangalore 2022 {#reactday-bangalore-2022}
-June 8 - 9, 2022.  Remote
-
-[Website](https://reactday.in/) - [Twitter](https://twitter.com/ReactDayIn) - [Linkedin](https://www.linkedin.com/company/react-day/) - [YouTube](https://www.youtube.com/reactify_in)
-
-### App.js Conf 2022 {#appjs-conf-2022}
-June 8 - 10, 2022. In-person in Kraków, Poland + remote
-
-[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
-
-### React Summit 2022 {#react-summit-2022}
-June 17 & 21, 2022. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
-
-[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
-
-### React Norway 2022 {#react-norway-2022}
-June 24, 2022. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
-
-[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
-
-### ReactNext 2022 {#react-next-2022}
-June 28, 2022. Tel-Aviv, Israel
-
-[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/c/ReactNext)
-
 ### React Native EU 2022: Powered by {callstack} {#react-native-eu-2022-powered-by-callstack}
 September 1-2, 2022 - Remote event
 
@@ -74,6 +43,36 @@ May, 2023. Salt Lake City, UT
 
 ## Past Conferences {#past-conferences}
 
+### ReactNext 2022 {#react-next-2022}
+June 28, 2022. Tel-Aviv, Israel
+
+[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/c/ReactNext)
+
+### React Norway 2022 {#react-norway-2022}
+June 24, 2022. In-person at Farris Bad Hotel in Larvik, Norway and online (hybrid event).
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
+
+### React Summit 2022 {#react-summit-2022}
+June 17 & 21, 2022. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
+
+[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
+
+### App.js Conf 2022 {#appjs-conf-2022}
+June 8 - 10, 2022. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### React Day Bangalore 2022 {#reactday-bangalore-2022}
+June 8 - 9, 2022.  Remote
+
+[Website](https://reactday.in/) - [Twitter](https://twitter.com/ReactDayIn) - [Linkedin](https://www.linkedin.com/company/react-day/) - [YouTube](https://www.youtube.com/reactify_in)
+
+### render(ATL) 2022 🍑 {#render-atlanta-2022} 
+June 1 - 4, 2022. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
+
 ### RemixConf 2022 {#remixconf-2022}
 May 24 - 25, 2022. Salt Lake City, UT
 

content/docs/hooks-faq.md

@@ -1,4 +1,4 @@
----
+ ---
 id: hooks-faq
 title: "Хуки: ответы на вопросы"
 permalink: docs/hooks-faq.html
@@ -333,54 +333,22 @@ function useWindowPosition() {
 
 ### Как получить предыдущие пропсы или состояние? {#how-to-get-the-previous-props-or-state}
 
-Сейчас, вы можете сделать это вручную, [используя реф](#is-there-something-like-instance-variables):
+There are two cases in which you might want to get previous props or state.
 
-```js{6,8}
-function Counter() {
-  const [count, setCount] = useState(0);
+Sometimes, you need previous props to **clean up an effect.** For example, you might have an effect that subscribes to a socket based on the `userId` prop. If the `userId` prop changes, you want to unsubscribe from the _previous_ `userId` and subscribe to the _next_ one. You don't need to do anything special for this to work:
 
-  const prevCountRef = useRef();
-  useEffect(() => {
-    prevCountRef.current = count;
-  });
-  const prevCount = prevCountRef.current;
-
-  return <h1>Сейчас: {count}, до этого: {prevCount}</h1>;
-}
-```
-
-Это может показаться усложнённым, но вы можете вынести эту логику в отдельный хук:
-
-```js{3,7}
-function Counter() {
-  const [count, setCount] = useState(0);
-  const prevCount = usePrevious(count);
-  return <h1>Сейчас: {count}, до этого: {prevCount}</h1>;
-}
-
-function usePrevious(value) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+```js
+useEffect(() => {
+  ChatAPI.subscribeToSocket(props.userId);
+  return () => ChatAPI.unsubscribeFromSocket(props.userId);
+}, [props.userId]);
 ```
 
-Обратите внимание, как это будет работать для пропсов, состояния или любого другого вычисляемого значения.
-
-```js{5}
-function Counter() {
-  const [count, setCount] = useState(0);
-
-  const calculation = count + 100;
-  const prevCalculation = usePrevious(calculation);
-  // ...
-```
+In the above example, if `userId` changes from `3` to `4`, `ChatAPI.unsubscribeFromSocket(3)` will run first, and then `ChatAPI.subscribeToSocket(4)` will run. There is no need to get "previous" `userId` because the cleanup function will capture it in a closure.
 
-Возможно, в будущем API React введёт хук `usePrevious`, так как он требуется довольно часто.
+Other times, you might need to **adjust state based on a change in props or other state**. This is rarely needed and is usually a sign you have some duplicate or redundant state. However, in the rare case that you need this pattern, you can [store previous state or props in state and update them during rendering](#how-do-i-implement-getderivedstatefromprops).
 
-Также смотрите [рекомендованный паттерн для производного состояния](#how-do-i-implement-getderivedstatefromprops).
+We have previously suggested a custom Hook called `usePrevious` to hold the previous value. However, we've found that most use cases fall into the two patterns described above. If your use case is different, you can [hold a value in a ref](#is-there-something-like-instance-variables) and manually update it when needed. Avoid reading and updating refs during rendering because this makes your component's behavior difficult to predict and understand.
 
 ### Почему я вижу устаревшие пропсы или состояние в моей функции? {#why-am-i-seeing-stale-props-or-state-inside-my-function}