From 3ee3a60a1bcc687c0b87039a3a6582e3b1d6887c Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 26 May 2025 17:56:28 +0900 Subject: [PATCH 01/15] Fix wrong explanation in preserving-and-resetting-state (#6043) --- src/content/learn/preserving-and-resetting-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index bf5531f35f..11d398d23f 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -672,7 +672,7 @@ label { -The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. +The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. From 9db23d61294ab9aa74b81471bad51db6dfbcda6b Mon Sep 17 00:00:00 2001 From: Dmitry Titov <61434098+dimatitov@users.noreply.github.com> Date: Mon, 2 Jun 2025 12:34:46 -0300 Subject: [PATCH 02/15] fix: correct broken WAI-ARIA modal dialog link in createPortal reference (#7833) * fix link from ARIA dialog-modal * chore: trigger CLA recheck --- src/content/reference/react-dom/createPortal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index c04510f80d..5717460df6 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -240,7 +240,7 @@ export default function ModalContent({ onClose }) { It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way. -Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. +Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. From bbcb9af1c99e1fc148ff4f02982773c407b64e4c Mon Sep 17 00:00:00 2001 From: Shubham Gupta <50445450+shubhamui@users.noreply.github.com> Date: Mon, 2 Jun 2025 21:42:59 +0530 Subject: [PATCH 03/15] Update meetups.md adding React Rajasthan Community (#7831) Adding the React Community for Rajasthan India --- src/content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 81fc5c2104..b4da5cdffb 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) * [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) +* [Rajasthan](https://reactrajasthan.com) ## Indonesia {/*indonesia*/} * [Indonesia](https://www.meetup.com/reactindonesia/) From a2d17d1218aa6559537b0aad9c4c12098b4197aa Mon Sep 17 00:00:00 2001 From: "G. van Dorland" Date: Mon, 2 Jun 2025 18:15:13 +0200 Subject: [PATCH 04/15] Update components-and-hooks-must-be-pure.md (#7830) Some grammar fixes, and language clarifications --- .../reference/rules/components-and-hooks-must-be-pure.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 d3d54560ef..6da6d49bb3 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 @@ -207,7 +207,7 @@ A component's props and state are immutable [snapshots](learn/state-as-a-snapsho You can think of the props and state values as snapshots that are updated after rendering. For this reason, you don't modify the props or state variables directly: instead you pass new props, or use the setter function provided to you to tell React that state needs to update the next time the component is rendered. ### 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 since it may or may not work depending on the circumstance. +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 {2} function Post({ item }) { @@ -307,7 +307,7 @@ function useIconStyle(icon) { } ``` -If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. +If you were to mutate the Hook's arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. ```js {4} style = useIconStyle(icon); // `style` is memoized based on `icon` @@ -327,7 +327,7 @@ Similarly, it's important to not modify the return values of Hooks, as they may ## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/} -Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created. +Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created. 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. From 94424aed87efca6616c1b21945a04b69e333202e Mon Sep 17 00:00:00 2001 From: Julius Lundang Date: Tue, 3 Jun 2025 00:18:57 +0800 Subject: [PATCH 05/15] Update referencing-values-with-refs.md (#7829) Fixed invalid URL --- src/content/learn/referencing-values-with-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 4faf18786f..fab6599f26 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -464,7 +464,7 @@ export default function Toggle() { #### Fix debouncing {/*fix-debouncing*/} -In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost. From 172f0b995857a7ac4c5c5e5ca7ea90e36cce9ca0 Mon Sep 17 00:00:00 2001 From: jinsoo <89149734+Jinsoo1004@users.noreply.github.com> Date: Tue, 3 Jun 2025 01:33:18 +0900 Subject: [PATCH 06/15] Add uwu click animation (#7822) --- src/components/Layout/TopNav/TopNav.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index cc5c654e3d..a4b431189e 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -266,7 +266,9 @@ export default function TopNav({
- + logo by @sawaratsuki1004 Date: Mon, 2 Jun 2025 19:34:02 +0300 Subject: [PATCH 07/15] Fix typo and clarily that a server function reference is created only when that function is used by a Client Component (#7746) --- src/content/reference/rsc/server-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index 770f5a705e..2603c10992 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -28,7 +28,7 @@ To support Server Functions as a bundler or framework, we recommend pinning to a -When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. +When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components. From 06965de1d062a477f71f53c204051e770b65c822 Mon Sep 17 00:00:00 2001 From: Mike DiDomizio Date: Mon, 2 Jun 2025 12:34:47 -0400 Subject: [PATCH 08/15] Add React Alicante 2025 to Conferences page (#7674) --- src/content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index a2bcd196e4..a97f3d5b42 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland. [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream From e90179047b1e7dd1ef19a37eed52765d8e04c484 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 2 Jun 2025 22:06:20 +0530 Subject: [PATCH 09/15] fix: use const where applicable in examples for keeping components pure (#7819) --- src/content/learn/keeping-components-pure.md | 26 ++++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 6d4f55763f..70049e58e2 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -175,7 +175,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -245,7 +245,7 @@ Rendering is a *calculation*, it shouldn't try to "do" things. Can you express t ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -307,7 +307,7 @@ You can fix this component by calculating the `className` and including it in th ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -606,14 +606,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -702,14 +702,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -770,7 +770,7 @@ Alternatively, you could create a _new_ array (by copying the existing one) befo ```js src/StoryTray.js active export default function StoryTray({ stories }) { // Copy the array! - let storiesToDisplay = stories.slice(); + const storiesToDisplay = stories.slice(); // Does not affect the original array: storiesToDisplay.push({ @@ -794,14 +794,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. From 87cef4a918be9873c9fed9115688de46e657ee71 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 3 Jun 2025 12:28:27 -0400 Subject: [PATCH 10/15] Remove `forwardRef` reference from API listing (#7837) This API is now under "Legacy APIs" and should probably no longer be listed as a "modern API". --- src/content/reference/react/apis.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index cbab4a0e6f..6cb990908a 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -11,7 +11,6 @@ In addition to [Hooks](/reference/react) and [Components](/reference/react/compo --- * [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) -* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef) * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) From c60173f9a4be1021260327716fc4f3ba26295d4e Mon Sep 17 00:00:00 2001 From: minami yoshihiko Date: Wed, 4 Jun 2025 01:29:34 +0900 Subject: [PATCH 11/15] docs: Refactor context provider usage (#7793) * delete provider * Fix NavContext usage in Talks component * Fix TocContext and LanguagesContext usage in Page component * Fix IllustrationContext usage in IllustrationBlock component * Fix LevelContext and TasksContext usage in managing-state.md * Fix ThemeContext and Context usage in MyApp component * Fix HighlightContext usage in List component * Fix ThemeContext usage in MyApp component * Fix ErrorDecoderContext usage in ErrorDecoderPage component * Fix ThemeContext usage in MyPage and MyApp components * Fix ThemeContext usage in MyApp component * Fix useContext documentation to correct context provider references * Fix context provider references in createContext documentation * prettier * Update src/content/reference/react/createContext.md --------- Co-authored-by: Ricky --- src/components/Layout/HomeContent.js | 4 +- src/components/Layout/Page.tsx | 8 +- src/components/MDX/MDXComponents.tsx | 4 +- src/content/learn/managing-state.md | 12 +-- .../scaling-up-with-reducer-and-context.md | 56 +++++------ src/content/learn/typescript.md | 8 +- src/content/reference/react/Component.md | 8 +- src/content/reference/react/cloneElement.md | 8 +- src/content/reference/react/createContext.md | 27 ++--- src/content/reference/react/memo.md | 4 +- src/content/reference/react/use.md | 8 +- src/content/reference/react/useContext.md | 98 +++++++++---------- src/pages/errors/[errorCode].tsx | 4 +- 13 files changed, 124 insertions(+), 125 deletions(-) diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 83f5fa4f2e..22b75016b6 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1172,7 +1172,7 @@ async function Talks({ confId }) { } right={ - + - + } /> ); diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ec3a6eba0c..c3224e5174 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -82,11 +82,9 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - - {children} - - + + {children} +
{!isBlogIndex && ( )); return ( - +
{sequential ? (
    @@ -369,7 +369,7 @@ function IllustrationBlock({ )}
- + ); } diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 93bcc10fd6..f2f02c64b9 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -741,9 +741,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -836,13 +836,13 @@ export function TasksProvider({ children }) { ); return ( - - + {children} - - + + ); } diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index c3da0c6373..e193333b9b 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -461,11 +461,11 @@ export default function TaskApp() { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); // ... return ( - - + + ... - - + + ); } ``` @@ -509,8 +509,8 @@ export default function TaskApp() { } return ( - - + +

Day off in Kyoto

- - + + ); } @@ -676,13 +676,13 @@ In the next step, you will remove prop passing. Now you don't need to pass the list of tasks or the event handlers down the tree: ```js {4-5} - - + +

Day off in Kyoto

- - + + ``` Instead, any component that needs the task list can read it from the `TaskContext`: @@ -730,13 +730,13 @@ export default function TaskApp() { ); return ( - - + +

Day off in Kyoto

- - + + ); } @@ -921,11 +921,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - - + + {children} - - + + ); } ``` @@ -963,11 +963,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1174,11 +1174,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 7edf8eb6ed..bf7483d1cf 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -260,9 +260,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -310,9 +310,9 @@ export default function MyApp() { const object = useMemo(() => ({ kind: "complex" }), []); return ( - + - + ) } diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 8e58af8ff6..09acbc7d69 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1814,9 +1814,9 @@ function Form() { export default function MyApp() { return ( - +
- + ) } ``` @@ -1900,9 +1900,9 @@ function Form() { export default function MyApp() { return ( - + - + ) } ``` diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 6bcea51b05..4e29ff203b 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -414,9 +414,9 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - + {renderItem(item)} - + ); })} ``` @@ -472,12 +472,12 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - {renderItem(item)} - + ); })}
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 03b09f8af9..5b2cc0eb22 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -38,14 +38,15 @@ const ThemeContext = createContext('light'); `createContext` returns a context object. -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: +**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: -* `SomeContext.Provider` lets you provide the context value to components. +* `SomeContext` lets you provide the context value to components. * `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` is a legacy way to provide the context value before React 19. --- -### `SomeContext.Provider` {/*provider*/} +### `SomeContext` {/*provider*/} Wrap your components into a context provider to specify the value of this context for all components inside: @@ -54,9 +55,9 @@ function App() { const [theme, setTheme] = useState('light'); // ... return ( - + - + ); } ``` @@ -141,11 +142,11 @@ function App() { // ... return ( - - + + - - + + ); } ``` @@ -187,11 +188,11 @@ import { ThemeContext, AuthContext } from './Contexts.js'; function App() { // ... return ( - - + + - - + + ); } ``` diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 26fa9ed9cc..01d6290f1a 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -226,12 +226,12 @@ export default function MyApp() { } return ( - + - + ); } diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 557a71cad2..91e19c4b45 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -74,9 +74,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -116,9 +116,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index ce06e7035d..f69c49af98 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -38,11 +38,11 @@ function MyComponent() { #### Returns {/*returns*/} -`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. +`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. #### Caveats {/*caveats*/} -* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. +* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. * React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values. * If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison. @@ -70,9 +70,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -98,9 +98,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } @@ -183,14 +183,14 @@ Often, you'll want the context to change over time. To update context, combine i function MyPage() { const [theme, setTheme] = useState('dark'); return ( - + - + ); } ``` @@ -213,7 +213,7 @@ const ThemeContext = createContext(null); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -317,14 +317,14 @@ const CurrentUserContext = createContext(null); export default function MyApp() { const [currentUser, setCurrentUser] = useState(null); return ( - - + ); } @@ -411,8 +411,8 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); const [currentUser, setCurrentUser] = useState(null); return ( - - + Use dark mode - - + + ) } @@ -596,16 +596,16 @@ export default function MyApp() { function MyProviders({ children, theme, setTheme }) { const [currentUser, setCurrentUser] = useState(null); return ( - - + {children} - - + + ); } @@ -775,11 +775,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -978,9 +978,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> - + - + - +