From 56ca02f14234a4018026f13677c3342dfe27e70c Mon Sep 17 00:00:00 2001 From: Goku <212212632+Gokul-Gireesh@users.noreply.github.com> Date: Sat, 30 Aug 2025 21:20:36 +0530 Subject: [PATCH 1/2] Create 0000-Context-multiple-props.md First draft of feature request --- text/0000-Context-multiple-props.md | 86 +++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 text/0000-Context-multiple-props.md diff --git a/text/0000-Context-multiple-props.md b/text/0000-Context-multiple-props.md new file mode 100644 index 00000000..6edeb74e --- /dev/null +++ b/text/0000-Context-multiple-props.md @@ -0,0 +1,86 @@ +- Start Date: 2025-08-30 +- RFC PR: +- React Issue: + +# Summary + +Allow React Context to accept non-`children` props as the provided value. Keep `value` for backward compatibility, but if no `value` is passed, all other props (except `children`) become the context value. + +# Basic example + +```jsx + + + +``` + +Consumer: + +```jsx +const { foo, bar } = useContext(MyContext); +``` + +# Motivation + +Currently, React Context requires all values to be wrapped in a single `value` prop, which is inconsistent with how props are normally passed in React. +This adds boilerplate and can be confusing for beginners. Allowing multiple props to become the context value simplifies the API, reduces wrapping, and aligns Context with normal React patterns. + +# Detailed design + +- If `value` is present → it is used as the context value (backward-compatible). +- Otherwise → context value is an object composed of all non-`children` props. +- `children` is excluded from the context value. +- Reserved props like `key` and `ref` are ignored as usual. + +Example migration: + +**Before (legacy pattern):** +```jsx + + + +``` + +**React 19:** +```jsx + + + +``` + +**Proposed:** +```jsx + + + +``` + +# Drawbacks + +- Slightly more complex implementation of the Context provider. +- Potential confusion if `value` and other props are passed together. +- Need to update documentation and teaching materials. + +# Alternatives + +- Keep the current `value={{…}}` pattern. +- Provide userland wrapper components to wrap multiple props into `value` (less consistent, more scattered). + +# Adoption strategy + +- Old code using `value` continues to work. +- New code can adopt the prop-based pattern gradually. +- No breaking changes. +- No codemod is required, but could be optional for large migrations. + +# How we teach this + +- Explain that Context now works like normal props. +- Emphasize that `children` remains special and is not included. +- Tutorials can now show `` without wrapping in `value`. +- Documentation updated to show both legacy (`value`) and new prop-based usage. + +# Unresolved questions + +- Should React warn if both `value` and other props are passed? +- How should TypeScript inference handle the context type when `value` is absent? From e8d90a8bfb11cc763813e5fadaced20ec77bb574 Mon Sep 17 00:00:00 2001 From: Goku <212212632+Gokul-Gireesh@users.noreply.github.com> Date: Sat, 30 Aug 2025 22:22:34 +0530 Subject: [PATCH 2/2] Update 0000-Context-multiple-props.md Second Draft --- text/0000-Context-multiple-props.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/text/0000-Context-multiple-props.md b/text/0000-Context-multiple-props.md index 6edeb74e..40f516eb 100644 --- a/text/0000-Context-multiple-props.md +++ b/text/0000-Context-multiple-props.md @@ -32,6 +32,12 @@ This adds boilerplate and can be confusing for beginners. Allowing multiple prop - `children` is excluded from the context value. - Reserved props like `key` and `ref` are ignored as usual. +## Value Handling Rules + +1. If the only prop is `value`, it behaves exactly like the current React Context (backward-compatible). +2. If multiple props are provided including `value`, `value` is just another property in the context object, e.g. `{ value: theme, foo: bar }`. +3. If a single new prop (not `value`) is provided, it becomes the context value as usual. + Example migration: **Before (legacy pattern):** @@ -58,8 +64,8 @@ Example migration: # Drawbacks - Slightly more complex implementation of the Context provider. -- Potential confusion if `value` and other props are passed together. - Need to update documentation and teaching materials. +- Possible confusion if both `value` and other props are passed (clarified by Value Handling Rules). # Alternatives @@ -82,5 +88,4 @@ Example migration: # Unresolved questions -- Should React warn if both `value` and other props are passed? -- How should TypeScript inference handle the context type when `value` is absent? +- Should React emit a warning in developer mode when only the `value` prop is used, to encourage migration to the new prop-based pattern?