Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
9f55a5c
Capitalize Context in keeping-components-pure.md
Dextheking1 Sep 18, 2026
150d6ef
Capitalize Context in lifecycle-of-reactive-effects.md
Dextheking1 Sep 18, 2026
bda25a5
Capitalize Context in managing-state.md
Dextheking1 Sep 18, 2026
9b75129
Capitalize Context in passing-data-deeply-with-context.md
Dextheking1 Sep 18, 2026
19b4378
Capitalize Context in introduction.md
Dextheking1 Sep 18, 2026
f1697e2
Capitalize Context in scaling-up-with-reducer-and-context.md
Dextheking1 Sep 18, 2026
c69d7a4
Capitalize Context in typescript.md
Dextheking1 Sep 18, 2026
37fd21b
Capitalize Context in createPortal.md
Dextheking1 Sep 18, 2026
406f87f
Capitalize Context in Component.md
Dextheking1 Sep 18, 2026
1b6e88f
Capitalize Context in PureComponent.md
Dextheking1 Sep 18, 2026
c7e2bc2
Capitalize Context in StrictMode.md
Dextheking1 Sep 18, 2026
f7310d0
Capitalize Context in apis.md
Dextheking1 Sep 18, 2026
6843b6c
Capitalize Context in cache.md
Dextheking1 Sep 18, 2026
0b0d0dc
Capitalize Context in cloneElement.md
Dextheking1 Sep 18, 2026
840eb92
Capitalize Context in createContext.md
Dextheking1 Sep 18, 2026
b8c1e2f
Capitalize Context in hooks.md
Dextheking1 Sep 18, 2026
bb44c43
Capitalize Context in memo.md
Dextheking1 Sep 18, 2026
cb828cd
Capitalize Context in use.md
Dextheking1 Sep 18, 2026
b85936f
Capitalize Context in useRef.md
Dextheking1 Sep 18, 2026
85aa5e3
Capitalize Context in useSyncExternalStore.md
Dextheking1 Sep 18, 2026
01033d0
Capitalize Context in server-components.md
Dextheking1 Sep 18, 2026
34f8f07
Capitalize Context in components-and-hooks-must-be-pure.md
Dextheking1 Sep 18, 2026
f941508
Capitalize Context in index.md
Dextheking1 Sep 18, 2026
4566bdd
Capitalize Context in useContext.md
Dextheking1 Sep 18, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/learn/keeping-components-pure.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ In general, you should not expect your components to be rendered in any particul

#### Detecting impure calculations with StrictMode {/*detecting-impure-calculations-with-strict-mode*/}

Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only.
Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [Context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only.

When you want to *change* something in response to user input, you should [set state](/learn/state-a-components-memory) instead of writing to a variable. You should never change preexisting variables or objects while your component is rendering.

Expand Down Expand Up @@ -219,7 +219,7 @@ Every new React feature we're building takes advantage of purity. From data fetc
* **It minds its own business.** It should not change any objects or variables that existed before rendering.
* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX.
* Rendering can happen at any time, so components should not depend on each others' rendering sequence.
* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects.
* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and Context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects.
* Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`.
* Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm.

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/lifecycle-of-reactive-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -554,7 +554,7 @@ However, if you [think from the Effect's perspective,](#thinking-from-the-effect

Props and state aren't the only reactive values. Values that you calculate from them are also reactive. If the props or state change, your component will re-render, and the values calculated from them will also change. This is why all variables from the component body used by the Effect should be in the Effect dependency list.

Let's say that the user can pick a chat server in the dropdown, but they can also configure a default server in settings. Suppose you've already put the settings state in a [context](/learn/scaling-up-with-reducer-and-context) so you read the `settings` from that context. Now you calculate the `serverUrl` based on the selected server from props and the default server:
Let's say that the user can pick a chat server in the dropdown, but they can also configure a default server in settings. Suppose you've already put the settings state in a [Context](/learn/scaling-up-with-reducer-and-context) so you read the `settings` from that Context. Now you calculate the `serverUrl` based on the selected server from props and the default server:

```js {3,5,10}
function ChatRoom({ roomId, selectedServerUrl }) { // roomId is reactive
Expand Down
12 changes: 6 additions & 6 deletions src/content/learn/managing-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -697,11 +697,11 @@ Read **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-int

</LearnMore>

## Passing data deeply with context {/*passing-data-deeply-with-context*/}
## Passing data deeply with Context {/*passing-data-deeply-with-context*/}

Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props.

Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through context.
Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through Context.

<Sandpack>

Expand Down Expand Up @@ -795,15 +795,15 @@ export const LevelContext = createContext(0);

<LearnMore path="/learn/passing-data-deeply-with-context">

Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using context as an alternative to passing props.
Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using Context as an alternative to passing props.

</LearnMore>

## Scaling up with reducer and context {/*scaling-up-with-reducer-and-context*/}
## Scaling up with reducer and Context {/*scaling-up-with-reducer-and-context*/}

Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and Context together to manage state of a complex screen.

With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state.
With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via Context. They can also dispatch actions to update that state.

<Sandpack>

Expand Down
Loading
Loading