From 7f041241543b09e48ad287ee9607085df9379dca Mon Sep 17 00:00:00 2001 From: Jason Bonta Date: Thu, 23 Mar 2023 10:55:41 -0700 Subject: [PATCH] Update "top level" language to be less ambiguous with "levelContext" (#5807) We use "top level" all over the docs, but this specific topic uses a different meaning of "level". If you're learning about passing context across multiple "levels" of components, this is actually pretty confusing and makes you think you can only useContext at, for example, the top level of your app. --- src/content/learn/passing-data-deeply-with-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 1c5c1a16..45c5e77d 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -336,7 +336,7 @@ export default function Heading({ children }) { } ``` -`useContext` is a Hook. Just like `useState` and `useReducer`, you can only call a Hook at the top level of a React component. **`useContext` tells React that the `Heading` component wants to read the `LevelContext`.** +`useContext` is a Hook. Just like `useState` and `useReducer`, you can only call a Hook immediately inside a React component (not inside loops or conditions). **`useContext` tells React that the `Heading` component wants to read the `LevelContext`.** Now that the `Heading` component doesn't have a `level` prop, you don't need to pass the level prop to `Heading` in your JSX like this anymore: