Clarification about multiple contexts on "Scaling Up with Reducer and Context" documentation page
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Hi, new react docs are great. I had a question about the sample code in Scaling Up with Reducer and Context. I hope this is a reasonable way to provide feedback on a specific page. I did a quick issue search and didn't find anything related. Here is some of the sample code:
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
export default function TaskApp() {
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
// ...
return (
<TasksContext.Provider value={tasks}>
<TasksDispatchContext.Provider value={dispatch}>
...
</TasksDispatchContext.Provider>
</TasksContext.Provider>
);
}
It's interesting that you chose that style vs:
```js
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
export default function TaskApp() {
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
// ...
return (
<TasksContext.Provider value={{ tasks, dispatch }}>
...
</TasksContext.Provider>
);
}
If I understand correctly, the benefit of multiple contexts comes in when I've memoized a component that is a child of our contexts, and then I want to use dispatch inside that child component without subscribing to changes to tasks.
This seems either important to elaborate on in the documentation page, or if you don't want to make the page more complex, maybe it'd be simpler for everyone to just use one context? One potential problem with the sample code you've chosen to share, and without explanation, is that it suggests the use of a lot of contexts, one for every bit of data you might want to share, which can lead to overwrought code in my opinion.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the “Scaling Up with Reducer and Context” page and its linked sample, especially TaskApp and TasksContext.js. Compare the separate-context and single-context examples, then determine what explanation or guidance the page needs so readers understand the tradeoff and when the sample is appropriate.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100