Usage: Selective Context Consumer Library

usage.selective-context-consumer.tsx

import {
  FC,
  memo,
  useRef,
  useEffect,
  useReducer,
  useCallback,
  createContext,
} from "react";
import { SelectiveContextConsumer } from "selective-context-consumer";

interface IStateContext {
  beer: number;
  honey: number;
  addBeer: () => void;
  addHoney: () => void;
}

const StateContext = createContext<IStateContext>({
  beer: 0,
  honey: 0,
  addBeer: () => {},
  addHoney: () => {},
});

const useIRendered = (): [number, () => void] => {
  const countRef = useRef(0);

  const increment = () => (countRef.current += 1);

  return [countRef.current, increment];
};

const RendersCounter = () => {
  const [renders, rendered] = useIRendered();

  useEffect(() => rendered());

  return <b>Render count: {renders}</b>;
};

const Beer: FC = memo(() => {
  const selectorFunc = useCallback((context: IStateContext) => {
    const { beer, addBeer } = context;
    return { beer, addBeer };
  }, []);
  return (
    <div>
      <b>
        Beer: <RendersCounter />
      </b>
      <SelectiveContextConsumer context={StateContext} selector={selectorFunc}>
        {({ beer, addBeer }) => (
          <>
            <button onClick={addBeer}>Beer: {beer}</button>
            <RendersCounter />
          </>
        )}
      </SelectiveContextConsumer>
    </div>
  );
});
const Honey: FC = memo(() => {
  return (
    <div>
      <b>
        Honey: <RendersCounter />
      </b>
      <SelectiveContextConsumer
        context={StateContext}
        selector={({ honey, addHoney }) => ({ honey, addHoney })}
      >
        {({ honey, addHoney }: any) => (
          <>
            <button onClick={addHoney}>honey: {honey}</button>
            <RendersCounter />
          </>
        )}
      </SelectiveContextConsumer>
    </div>
  );
});
const App: FC = () => {
  const [beer, addBeer] = useReducer((state: number) => state + 1, 0);
  const [honey, addHoney] = useReducer((state: number) => state + 1, 0);

  return (
    <StateContext.Provider
      value={{
        beer,
        honey,
        addBeer,
        addHoney,
      }}
    >
      <div>
        <h1>Hello world</h1>
        <Beer />
        <Honey />
      </div>
    </StateContext.Provider>
  );
};

export default App;