You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, any changes in the context will update all components.
What is the expected behavior?
Currently, when subscribing to context, if any value in the context changes, all consumers will be updated:
constvalue=useContext(MyContext);
My suggestion is the following: optionally, allow receiving specific values from context values and only update the components if the returned values change. Here is an example:
constdata=useContext(MyContext,value=>value.data);// value = context value
When the second function argument is defined, only the returned value from the function will be compared and accessed. This will simplify a lot of workflows where multiple contexts are used for multiple values in order to reduce the number of context updates. Here is an example from Hooks FAQ (modified a little bit):
functionTodosApp(){// Note: `dispatch` won't change between re-rendersconst[todos,dispatch]=useReducer(todosReducer);return(<TodosData.Providervalue={todos}><TodosDispatch.Providervalue={dispatch}><DeepTreetodos={todos}/></TodosDispatch.Provider></TodosData.Provider>);}functionDeepChild(props){// If we want to perform an action, we can get dispatch from context.constdispatch=useContext(TodosDispatch);functionhandleClick(){dispatch({type: 'add',text: 'hello'});}return(<buttononClick={handleClick}>Add todo</button>);}functionAnotherDeepChild(props){constdata=useContext(TodosData);
...
}
With the proposed API addition, we can just use the same context to do retrieve two different values:
functionTodosApp(){// Note: `dispatch` won't change between re-rendersconst[todos,dispatch]=useReducer(todosReducer);return(<TodosContext.Providervalue={{ todos, dispatch }}><DeepTreetodos={todos}/></TodosContext.Provider>);}functionDeepChild(props){constdispatch=useContext(TodosContext,value=>value.dispatch);}functionAnotherDeepChild(props){consttodos=useContext(TodosContext,value=>value.todos);}
Another useful scenario for this addition is dynamically selecting items from a centralized store based on context. If a developer needs to selectively retrieve specific values from an object, they can do it very easily. Something similar to Redux' useSelector but is part of a normal Context Flow:
I suggest you either create a new alternative RFC or collaborate with the existing open one. 😄 (I'm going to close this issue out in the meanwhile)
For what it's worth, Dan brought up this issue a while ago (#14110) and there are some current mitigation strategies we recommend. He's outlined them here: #15156 (comment)
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
Currently, any changes in the context will update all components.
What is the expected behavior?
Currently, when subscribing to context, if any value in the context changes, all consumers will be updated:
My suggestion is the following: optionally, allow receiving specific values from context values and only update the components if the returned values change. Here is an example:
When the second function argument is defined, only the returned value from the function will be compared and accessed. This will simplify a lot of workflows where multiple contexts are used for multiple values in order to reduce the number of context updates. Here is an example from Hooks FAQ (modified a little bit):
With the proposed API addition, we can just use the same context to do retrieve two different values:
Another useful scenario for this addition is dynamically selecting items from a centralized store based on context. If a developer needs to selectively retrieve specific values from an object, they can do it very easily. Something similar to Redux'
useSelector
but is part of a normal Context Flow:Now, if
active
value is changed, onlyUserActiveTracker
will be updated. Ifname
ordob
is changed, onlyUserInfoTable
will be activated.The API can also be implemented for
Context.Consumer
component:and
static contextType
static class variable:The text was updated successfully, but these errors were encountered: