From 4096a70e89352cc1782eba3461f35ed09fe953c3 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 30 Apr 2025 11:44:49 +0900 Subject: [PATCH 01/15] delete provider --- .../scaling-up-with-reducer-and-context.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) 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 c3da0c6373d..e193333b9b2 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} - - + + ); } From 8669c3d2a92da92154fd38a3e02dfc246569d607 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 13:54:04 +0900 Subject: [PATCH 02/15] Fix NavContext usage in Talks component --- src/components/Layout/HomeContent.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 72ab36884d4..79d43b74a22 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1171,7 +1171,7 @@ async function Talks({ confId }) { } right={ - + - + } /> ); From edc6aa2cacea7c4ebf8d5e1ba692026eacf04200 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 13:55:44 +0900 Subject: [PATCH 03/15] Fix TocContext and LanguagesContext usage in Page component --- src/components/Layout/Page.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ec3a6eba0cf..fbc28e011e3 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -82,11 +82,11 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - + + {children} - - + + {!isBlogIndex && ( Date: Wed, 21 May 2025 16:39:36 +0900 Subject: [PATCH 04/15] Fix IllustrationContext usage in IllustrationBlock component --- src/components/MDX/MDXComponents.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 1da353f6093..36774ad4b27 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -354,7 +354,7 @@ function IllustrationBlock({ )); return ( - +
{sequential ? (
    @@ -369,7 +369,7 @@ function IllustrationBlock({ )}
- + ); } From 7929509155003731f9682e45baa4b9c65fb896c7 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 16:43:30 +0900 Subject: [PATCH 05/15] Fix LevelContext and TasksContext usage in managing-state.md --- src/content/learn/managing-state.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 93bcc10fd61..f2f02c64b9d 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} - - + + ); } From 9a550552710975afe2262dae416cec9125724eb7 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 16:44:43 +0900 Subject: [PATCH 06/15] Fix ThemeContext and Context usage in MyApp component --- src/content/learn/typescript.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 7edf8eb6ed9..bf7483d1cf2 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 ( - + - + ) } From d3588faf23db388efae471997ccf252f38c12943 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 16:45:30 +0900 Subject: [PATCH 07/15] Fix HighlightContext usage in List component --- src/content/reference/react/cloneElement.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 6bcea51b057..4e29ff203b1 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)} - + ); })}
From b9b6e0ecc587c7d1e7432cf1b12b3000bda189b8 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 16:46:22 +0900 Subject: [PATCH 08/15] Fix ThemeContext usage in MyApp component --- src/content/reference/react/Component.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 8e58af8ff63..09acbc7d69f 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 ( - + - + ) } ``` From 7fd0417639134f13b1213aab373212299e3ae52b Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 16:51:30 +0900 Subject: [PATCH 09/15] Fix ErrorDecoderContext usage in ErrorDecoderPage component --- src/pages/errors/[errorCode].tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx index a67c5742d71..c8cf28ad829 100644 --- a/src/pages/errors/[errorCode].tsx +++ b/src/pages/errors/[errorCode].tsx @@ -26,7 +26,7 @@ export default function ErrorDecoderPage({ ); return ( - + */} - + ); } From 6cae3ffd92559d9f8f7e4f217db29685d231fa09 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 16:52:28 +0900 Subject: [PATCH 10/15] Fix ThemeContext usage in MyPage and MyApp components --- src/content/reference/react/use.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 557a71cad22..91e19c4b450 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 ( - + - + ) } From e9d217830b4855922f9f43ffe779d03d22ccc084 Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 16:53:18 +0900 Subject: [PATCH 11/15] Fix ThemeContext usage in MyApp component --- src/content/reference/react/memo.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 26fa9ed9cc6..01d6290f1ab 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -226,12 +226,12 @@ export default function MyApp() { } return ( - + - + ); } From 92f9c6916d4a6fb6b5d5dc56d2ff721146edda1e Mon Sep 17 00:00:00 2001 From: nannany Date: Wed, 21 May 2025 17:20:30 +0900 Subject: [PATCH 12/15] Fix useContext documentation to correct context provider references --- src/content/reference/react/useContext.md | 98 +++++++++++------------ 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index ce06e7035d6..f69c49af981 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 ( <> - + - + - +