constate

To prevent unnecessary re-renders, you can pass selector functions to constate. Each selector splits the original hook's value into a separate React Context. This allows components to subscribe only to the specific part of the state they need.

Each selector function receives the value returned by useValue and returns the specific slice to be held by that context.

const [Provider, useCount, useIncrement] = constate(
  useCounter,
  (value) => value.count,      // becomes useCount
  (value) => value.increment, // becomes useIncrement
);

import { useCallback, useState } from "react";
import constate from "constate";

function useCounter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);
  const increment = useCallback(() => setCount((prev) => prev + 1), []);
  return { count, increment };
}

// Split the values into separate hooks
const [CounterProvider, useCount, useIncrement] = constate(
  useCounter,
  (value) => value.count, 
  (value) => value.increment,
);

function Button() {
  // This component only re-renders if increment changes (which it won't)
  const increment = useIncrement();
  return <button onClick={increment}>+</button>;
}

function Count() {
  // This component only re-renders when count changes
  const count = useCount();
  return <span>{count}</span>;
}

function App() {
  return (
    <CounterProvider initialCount={10}>
      <Count />
      <Button />
    </CounterProvider>
  );
}

To lift a custom hook's state into React Context, pass the hook to the constate factory. It returns a tuple containing a Provider component and a context hook.

1. Define your custom hook.
2. Wrap it with constate to get [Provider, useContextHook].
3. Wrap your component tree with the Provider.
4. Access the state using the returned hook in descendant components.

import { useState } from "react";
import constate from "constate";

// 1️⃣ Create a custom hook as usual
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((prevCount) => prevCount + 1);
  return { count, increment };
}

// 2️⃣ Wrap your hook with the constate factory
const [CounterProvider, useCounterContext] = constate(useCounter);

function Button() {
  // 3️⃣ Use context instead of custom hook
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button>;
}

function Count() {
  // 4️⃣ Use context in other components
  const { count } = useCounterContext();
  return <span>{count}</span>;
}

function App() {
  // 5️⃣ Wrap your components with Provider
  return (
    <CounterProvider>
      <Count />
      <Button />
    </CounterProvider>
  );
}