Feature Request: Ability to filter consumers in context

[Plitzi]

Good Afternoon,

I would like to suggest this:

When we use contexts with provider/consumer, this is a good feature but in some scenarios you just want to trigger the consumer in specific conditions

This ticket is about to request a feature where we can have the ability to define filters in our consumer, and based on these filters the consumer will be triggered or not when the provider changes the value

Why ?

• Performance boost (because this only will re-render the consumer based on the filters)
• Usability (we can design better apps and decrease the unnecesary re-renders)

Example

i have a context to manage elements, but i just want to re-render based on the ID

[bvaughn]

What you're describing could be implemented with a wrapper component and React.memo, no?

Maybe something like this:

function createFilteredConsumer(context, selectorFn, Component) {
  function areEqual(prevProps, nextProps) {
    const prevContextValue = prevProps.contextValue;
    const nextContextValue = nextProps.contextValue;

    // Hook into selector function logic here...
  }

  const MemoizedComponent = React.memo(Component, areEqual);

  function Wrapper(props) {
    const contextValue = React.useContext(Context);
    return <MemoizedComponent {...props} contextValue={contextValue} />;
  }

  if (__DEV__) {
    // For easier debugging.
    // https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
    const name = Component.displayName || Component.name || "Component";
    Wrapper.displayName = `FilteredConsumer(${name})`;
  }

  // Wrap with React.forwardRef() if needed.
  return Wrapper;
}

[markerikson]

This is the intent behind the "context selectors" RFC and PR:

• RFC: Context selectors reactjs/rfcs#119
• RFC Implementation: Speculative work #18262
• rough implementation of direct context updates #18855

[bvaughn]

Thanks for the links, Mark.

Going to close this issue.