How to use use-context-selector - 10 common examples

const Main = () => {
  const dispatch = useContextSelector(context, (v) => v[1]);
  const count = useContextSelector(context, (v) => v[0].count);
  useCheckTearing();
  useRegisterIncrementDispatcher(React.useCallback(() => {
    dispatch({ type: 'increment' });
  }, [dispatch]));
  const [localCount, localIncrement] = React.useReducer((c) => c + 1, 0);
  const normalIncrement = () => {
    dispatch({ type: 'increment' });
  };
  const [startTransition, isPending] = useTransition();
  const transitionIncrement = () => {
    startTransition(() => {
      dispatch({ type: 'increment' });
    });
  };
  return (

const Counter = () => {
  const count = useContextSelector(context, (v) => v[0].count);
  const dispatch = useContextSelector(context, (v) => v[1]);
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count: {count}</span>
        <button type="button"> dispatch({ type: 'increment' })}&gt;+1</button>
        <button type="button"> dispatch({ type: 'decrement' })}&gt;-1</button>
      </div>
    </div>
  );
};

const TextBox = () => {
  const text = useContextSelector(context, (v) => v[0].text);
  const dispatch = useContextSelector(context, (v) => v[1]);
  return (
    <div>
      {Math.random()}
      <div>
        <span>Text: {text}</span>
        <input value="{text}"> dispatch({ type: 'setText', text: event.target.value })} /&gt;
      </div>
    </div>
  );
};

const Counter = () => {
  const count = useContextSelector(MyContext, (v) => v[0].count);
  const dispatch = useContextSelector(MyContext, (v) => v[1]);
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count: {count}</span>
        <button type="button"> dispatch({ type: 'increment' })}&gt;+1</button>
        <button type="button"> dispatch({ type: 'decrement' })}&gt;-1</button>
      </div>
    </div>
  );
};

const Counter = React.memo(() => {
  const count = useContextSelector(context, (v) => v[0].count);
  syncBlock();
  return <div>{count}</div>;
}, shallowEqual);

const Counter = () => {
  const count = useContextSelector(MyContext, (v) => v[0].count);
  const dispatch = useContextSelector(MyContext, (v) => v[1]);
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count: {count}</span>
        <button type="button"> dispatch({ type: 'increment' })}&gt;+1</button>
        <button type="button"> dispatch({ type: 'decrement' })}&gt;-1</button>
      </div>
    </div>
  );
};

const Person = () => {
  const person = useContextSelector(MyContext, (v) => v[0].person);
  const dispatch = useContextSelector(MyContext, (v) => v[1]);
  return (
    <div>
      {Math.random()}
      <div>
        First Name:
        <input value="{person.firstName}"> {
            const firstName = event.target.value;
            dispatch({ firstName, type: 'setFirstName' });
          }}
        /&gt;
      </div>
      <div>
        Last Name:</div></div>

const Counter = () => {
  const count = useContextSelector(context, (v) => v[0].count);
  const dispatch = useContextSelector(context, (v) => v[1]);
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count: {count}</span>
        <button type="button"> dispatch({ type: 'increment' })}&gt;+1</button>
        <button type="button"> dispatch({ type: 'decrement' })}&gt;-1</button>
      </div>
    </div>
  );
};

const Person = () => {
  const person = useContextSelector(MyContext, (v) => v[0].person);
  const dispatch = useContextSelector(MyContext, (v) => v[1]);
  return (
    <div>
      {Math.random()}
      <div>
        First Name:
        <input value="{person.firstName}"> {
            const firstName = event.target.value;
            dispatch({ firstName, type: 'setFirstName' });
          }}
        /&gt;
      </div>
      <div>
        Last Name:
        </div></div>

import React, { useTransition } from 'react';
import { createContext, useContextSelector } from 'use-context-selector';

import {
  syncBlock,
  useRegisterIncrementDispatcher,
  initialState,
  reducer,
  ids,
  useCheckTearing,
  shallowEqual,
} from '../common';

const context = createContext(null);

const Provider = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return (
    
      {children}
    
  );
};

const Counter = React.memo(() => {
  const count = useContextSelector(context, (v) => v[0].count);
  syncBlock();
  return <div>{count}</div>;
}, shallowEqual);