stop listening to context React – Reactjs

There is no way to wrangle a useContext invocation into a custom hook that wouldn’t cause a rerender when the context value changes. However we can achieve similar functionality in a higher order component.

const withContextValue = Component => (props) => {
  const context = useContext(MyContext);
  const contextRef = useRef(context);
  if (contextRef.current.contextValue !== 'stop listen')
    contextRef.current = context;
  return <Component {...props} context={contextRef.current} />;  
};

Provided you pass a memoized component to withContextValue you’ll receive a component that will rerender on every context value change but the memoized component will not rerender unlike in the case where useContext was invoked inside the memoized component.

The above pattern can be unwieldy to work with and doesn’t eliminate rerenders completely. For a better developer experience you may want to try a subscription pattern where each consumer of a context gets to define what changes cause a rerender. Famously react-redux uses this pattern.

Define your context value as a mutable object.

class ContextValue {
  constructor() {
    this.subscribers = [];
    this.contextValue = '';
  }

  setContextValue(action) {
    const prevValue = this.contextValue;
    this.contextValue =
      typeof action === 'function'
        ? action(this.contextValue)
        : action;
    if (prevValue !== this.contextValue)
      this.subscribers.forEach(subscriber => subscriber(this.contextValue));
  }
  
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
    return () => void (this.subscribers = this.subscribers.filter(sub => sub !== subscriber));
  }
}

export const Provider = () => {
  const context = useRef(new ContextValue()).current;
  return <MyContext.Provider value={context}>{children}</MyContext.Provider>
};

export const useMyContext = (equalityFn = () => false) => {
  const [, rerender] = useReducer(() => ({}), {});
  const context = useContext(MyContext);
  const equalityFnRef = useRef(equalityFn);
  equalityFn.current = equalityFn;
  useEffect(
    () => context.subscribe(newValue => {
      if (!equalityFnRef.current(context.contextValue, newValue)) rerender();
    }),
    [context.subscriber, context.contextValue]
  );
  return context;
};

You can then define any equality function to limit rerenders on a consumer-by-consumer basis just like with Redux’s useSelector.

const {contextValue, setContextValue}= useMyContext(prevValue => prevValue === 'stop listen');

Mind you this pattern will stop unnecessary rerenders but will not stop the component from reading an up-to-date context value if something else causes a rerender. If you need to stop receiving new values you’ll want to wrap the hook in an extra layer of memoization.