### Constate Setup Phase Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/implementation.md

Demonstrates the initial setup phase of Constate, where a custom hook is passed along with selectors to the constate function. This results in the creation of a Provider component and custom hooks.

```typescript
function useCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}

const [Provider, useCount, useSetCount] = constate(
  useCounter,
  (value) => value.count,
  (value) => value.setCount,
);
```

--------------------------------

### Plain Context API Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Illustrates the traditional React Context API setup for managing state, including context creation, a custom hook for consumption, and a provider component.

```typescript
const CountContext = React.createContext<CountContextType | undefined>(
  undefined
);

function useCountContext() {
  const context = React.useContext(CountContext);
  if (!context) {
    throw new Error("useCountContext must be used within CountProvider");
  }
  return context;
}

function CountProvider({ children }: { children: React.ReactNode }) {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((c) => c + 1), []);
  const value = useMemo(() => ({ count, setCount, increment }), [count]);

  return (
    <CountContext.Provider value={value}>{children}</CountContext.Provider>
  );
}
```

--------------------------------

### Constate Installation

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/README.md

Command to install the constate library using npm. Ensure you have Node.js and npm installed.

```bash
npm install constate
```

--------------------------------

### Install ConstaTe

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/quick-reference.md

Install the ConstaTe package using npm, yarn, or pnpm.

```bash
npm install constate
# or
yarn add constate
# or
pnpm add constate
```

--------------------------------

### Install Constate with pnpm

Source: https://github.com/diegohaz/constate/blob/main/README.md

Install the constate package using pnpm.

```sh
pnpm add constate
```

--------------------------------

### Install Constate with Yarn

Source: https://github.com/diegohaz/constate/blob/main/README.md

Install the constate package using Yarn.

```sh
yarn add constate
```

--------------------------------

### Install Constate with npm

Source: https://github.com/diegohaz/constate/blob/main/README.md

Install the constate package using npm.

```sh
npm i constate
```

--------------------------------

### Redux Example for Counter

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Presents a typical Redux implementation for a counter, including action types, reducer, store setup, and component usage with hooks.

```javascript
// Action types
const INCREMENT = "INCREMENT";

// Reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
}

// Store setup
const store = createStore(counterReducer);

// Component
function Counter() {
  const count = useSelector((state) => state);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: INCREMENT })}>+</button>;
}
```

--------------------------------

### Vitest Setup for Counter Provider

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/testing-guide.md

Demonstrates a typical Vitest setup for testing a Counter Provider. It includes necessary imports, describe blocks, and beforeEach hooks for mock clearing.

```typescript
import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
import { render, renderHook, fireEvent, act } from "@testing-library/react";

describe("Counter Provider", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  test("provides context to components", () => {
    const { result } = renderHook(() => useCounterContext(), {
      wrapper: CounterProvider,
    });

    expect(result.current.count).toBe(0);
  });

  test("increments count", () => {
    const { result } = renderHook(() => useCounterContext(), {
      wrapper: CounterProvider,
    });

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });
});
```

--------------------------------

### Example File Structure

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/quick-reference.md

Illustrates a common project structure for organizing context-based state management with Consta, separating concerns into distinct context directories.

```tree
src/
├── contexts/
│   ├── auth/
│   │   ├── useAuth.ts
│   │   └── AuthProvider.tsx
│   ├── theme/
│   │   ├── useTheme.ts
│   │   └── ThemeProvider.tsx
│   └── index.ts
└── App.tsx
```

--------------------------------

### Basic Constate Usage Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

A fundamental example of using constate to create a Provider and a hook for managing a simple counter state.

```typescript
const [Provider, useValue] = constate(() => {
  const [count, setCount] = useState(0);
  return { count, setCount };
});

function App() {
  return (
    <Provider>
      <Header />
      <Content />
      <Footer />
    </Provider>
  );
}
```

--------------------------------

### Development Console Warning Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

Illustrates the development console warning message when a context hook is accessed without its Provider.

```text
Component must be wrapped with Provider.
```

--------------------------------

### Constate Return Value Pattern Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/types.md

Shows how the constate function is used and the resulting types of the returned Provider and hooks, including selectors.

```typescript
const [CounterProvider, useCount, useIncrement] = constate(
  useCounter,
  (value) => value.count,
  (value) => value.increment,
);

// CounterProvider: React.FC<React.PropsWithChildren<{}>>
// useCount: () => number
// useIncrement: () => (() => void)
```

--------------------------------

### Constate Usage with Props Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

Demonstrates how to define and use props for the Provider component, which are passed to the underlying custom hook.

```typescript
interface ThemeProviderProps {
  initialTheme?: "light" | "dark";
  onChange?: (theme: "light" | "dark") => void;
}

function useTheme({ initialTheme = "light" } = {} as ThemeProviderProps) {
  const [theme, setTheme] = useState<"light" | "dark">(initialTheme);
  return { theme, setTheme };
}

const [ThemeProvider, useThemeContext] = constate(useTheme);

function App() {
  return (
    <ThemeProvider initialTheme="dark">
      <Content />
    </ThemeProvider>
  );
}
```

--------------------------------

### With Inline Hook Definition

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/constate.md

An example of defining the custom hook directly within the `constate` call for concise state management setup.

```APIDOC
## With Inline Hook Definition

### Description

This example defines the custom hook inline as the first argument to `constate`. This is useful for simple hooks or when you want to keep the hook's definition close to where it's being used with `constate`, reducing the need for a separate hook function definition.

### Code

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

const [CounterProvider, useCount, useIncrement] = constate(
  ({ initialCount = 0 } = {}) => {
    const [count, setCount] = useState(initialCount);
    const increment = useCallback(() => setCount((prev) => prev + 1), []);
    return { count, increment };
  },
  (value) => value.count,
  (value) => value.increment,
);
```
```

--------------------------------

### Zustand Counter Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

A basic counter implementation using Zustand. It demonstrates creating a store with state and an action, and consuming it in a React component.

```typescript
const useCountStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useCountStore();
  return <button onClick={increment}>{count}</button>;
}
```

--------------------------------

### SelectorHooks Type Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/types.md

Illustrates the output of SelectorHooks based on provided selectors. Shows how selector return types are mapped to hook return types.

```typescript
// Given selectors that extract count and increment:
const [Provider, useCount, useIncrement] = constate(
  useCounter,
  (value) => value.count,        // returns number
  (value) => value.increment,    // returns () => void
);

// SelectorHooks produces:
// useCount: () => number
// useIncrement: () => (() => void)
```

--------------------------------

### Recoil Counter Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

A counter component implemented using Recoil. It utilizes atoms for state and RecoilRoot for providing the context.

```typescript
const countAtom = atom({
  key: "count",
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countAtom);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}
```

--------------------------------

### Basic Testing with Constate

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/README.md

Provides a simple example of how to test components that use constate. It involves rendering the component within its corresponding Provider and asserting its behavior using testing utilities like `@testing-library/react`.

```typescript
import { render, screen } from "@testing-library/react";

const [Provider, useValue] = constate(useHook);

function TestComponent() {
  const value = useValue();
  return <div>{value}</div>;
}

test("works", () => {
  render(
    <Provider>
      <TestComponent />
    </Provider>
  );
  expect(screen.getByText("value")).toBeInTheDocument();
});
```

--------------------------------

### Constate Runtime Phase Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/implementation.md

Shows the runtime usage of the Constate Provider and its associated hooks. Components wrapped by the Provider can access state and actions through the custom hooks, which internally use React context.

```jsx
<Provider>
  <Component1 />
  <Component2 />
</Provider>
```

--------------------------------

### Constate Equivalent for Context API

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Shows how to refactor the Plain Context API example using constate, resulting in less boilerplate and automatic error handling.

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

const [CountProvider, useCountContext] = constate(useCounter);
```

--------------------------------

### Selector Type Usage Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/types.md

Demonstrates how to define and use Selector types with a custom hook and the constate factory function. Shows creating separate contexts for different state parts.

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

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

// Create two selectors
const countSelector: Selector<typeof useCounter> = (value) => value.count;
const incrementSelector: Selector<typeof useCounter> = (value) => value.increment;

const [CounterProvider, useCount, useIncrement] = constate(
  useCounter,
  countSelector,
  incrementSelector,
);
```

--------------------------------

### Nested Providers Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/implementation.md

Demonstrates how nested providers allow components to use the closest matching Provider, enabling value overrides at different tree levels and scoped state management.

```typescript
<Provider1>
  <Provider2>
    <Component />
  </Provider2>
</Provider1>
```

--------------------------------

### Example Execution of Provider Nesting

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/implementation.md

Illustrates the step-by-step nesting of context providers within the Provider component when multiple selectors are used. The innermost provider corresponds to the last selector applied.

```typescript
// Initial: element = <ChildComponent />

// Iteration 0 (i=0):
// context = Context1
// selector = selectors[0] = (value) => value.count
// element = <Context1.Provider value={value.count}><ChildComponent /></Context1.Provider>

// Iteration 1 (i=1):
// context = Context2
// selector = selectors[1] = (value) => value.increment
// element = <Context2.Provider value={value.increment}>
//   <Context1.Provider value={value.count}><ChildComponent /></Context1.Provider>
// </Context2.Provider>
```

--------------------------------

### Create Test Utilities for Wrappers

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/testing-guide.md

Create helper functions for common test setup, such as a test wrapper component. This promotes reusability and consistency in your test suite.

```typescript
function createTestWrapper() {
  return function TestWrapper({ children }: { children: React.ReactNode }) {
    return <CounterProvider>{children}</CounterProvider>;
  };
}

test("component works with test wrapper", () => {
  const wrapper = createTestWrapper();
  const { result } = renderHook(() => useCounterContext(), { wrapper });

  expect(result.current.count).toBe(0);
});
```

--------------------------------

### Constate API: useValue Example

Source: https://github.com/diegohaz/constate/blob/main/README.md

Example of using constate with a simple custom hook that returns a single value. The custom hook can receive props which are passed down from the Provider.

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

const [CountProvider, useCountContext] = constate(() => {
  const [count] = useState(0);
  return count;
});
```

--------------------------------

### Composition with Custom Hooks and Constate

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/patterns-and-examples.md

Compose Constate providers with custom hooks to build complex state management solutions. This example shows how to combine routing and page state.

```typescript
function useRouter() {
  const [route, setRoute] = useState("/");
  const navigate = useCallback((path: string) => setRoute(path), []);
  return { route, navigate };
}

function usePageState() {
  const { route } = useRouter();
  const [pageData, setPageData] = useState({});
  return { route, pageData, setPageData };
}

const [Router, useRouterContext] = constate(useRouter);
const [Page, usePageContext] = constate(usePageState);

function App() {
  return (
    <Router>
      <Page>
        <Content />
      </Page>
    </Router>
  );
}
```

--------------------------------

### Constate Equivalent for Recoil Counter

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

The counter example rewritten using Constate, demonstrating its custom hook and Provider pattern as an alternative to Recoil's atom and RecoilRoot.

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

const [Provider, useCounterContext] = constate(useCounter);

function Counter() {
  const { count, setCount } = useCounterContext();
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

function App() {
  return (
    <Provider>
      <Counter />
    </Provider>
  );
}
```

--------------------------------

### Constate Equivalent for Redux Counter

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Shows the constate equivalent of the Redux counter example, demonstrating reduced boilerplate by replacing reducers and action creators with a custom hook.

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

const [Provider, useCounterContext] = constate(useCounter);

function Counter() {
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button>;
}

// In App
<Provider>
  <CounterComponent />
</Provider>;
```

--------------------------------

### Zustand Shallow Equality Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Shows how Zustand uses a `shallow` comparison for selector optimization and contrasts it with constate's approach. Constate recommends using separate selectors for similar optimization.

```typescript
const state = useStore((state) => ({ count: state.count }), shallow);

// Constate way
const [Provider, useCount] = constate(
  useCounter,
  (value) => value.count,
);
```

--------------------------------

### Setup Global Providers with beforeEach and afterEach

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/testing-guide.md

Use `beforeEach` and `afterEach` hooks in Vitest to set up and clean up global state or mocks before and after each test. This ensures a clean slate for every test.

```typescript
import { beforeEach, afterEach } from "vitest";

beforeEach(() => {
  // Reset state before each test
  vi.clearAllMocks();
});

afterEach(() => {
  // Clean up after each test
  vi.resetAllMocks();
});

test("each test runs with clean state", () => {
  // Test runs with fresh setup
});
```

--------------------------------

### Example of Missing Provider for Named Hook

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/debugging.md

Illustrates the scenario where a named context hook is called without its corresponding Provider, leading to an error.

```typescript
function useCounter() {
  return { count: 0 };
}

const [Provider, useCounterContext] = constate(useCounter);

function App() {
  useCounterContext(); // Error: uses useCounter hook
}
```

--------------------------------

### Constate API: useValue with Props Example

Source: https://github.com/diegohaz/constate/blob/main/README.md

Demonstrates how a custom hook used with constate can accept props. These props are passed to the hook when the Provider component is rendered.

```jsx
const [CountProvider, useCountContext] = constate(({ initialCount = 0 }) => {
  const [count] = useState(initialCount);
  return count;
});

function App() {
  return <CountProvider initialCount={10}>...</CountProvider>;
}
```

--------------------------------

### Tracking Render Counts with Constate

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/debugging.md

This example shows how to track render counts for a component using Constate. The `useEffect` hook logs a message to the console every time the `CountDisplay` component renders.

```typescript
function CountDisplay() {
  const { count } = useCounterContext();

  useEffect(() => {
    console.log("CountDisplay rendered");
  });

  return <div>{count}</div>;
}
```

--------------------------------

### Testing Missing Provider Warning

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/errors.md

This example shows how to test for the 'Missing Provider' console warning using `vitest` and `jest-spy`. It verifies that the correct warning message is issued when a hook is used without its provider.

```typescript
import { render } from "@testing-library/react";
import { vi } from "vitest";

const [, useValue] = constate(() => ({count: 0}));

function ComponentWithoutProvider() {
  useValue();
  return null;
}

// Test that warning is issued
vi.spyOn(console, "warn").mockImplementation(() => {});
render(<ComponentWithoutProvider />);
expect(console.warn).toHaveBeenCalledWith(
  "Component must be wrapped with Provider."
);
```

--------------------------------

### Adding Development-Only Logging in Custom Hooks

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/debugging.md

This example shows how to include development-specific code, such as logging state changes, within a custom hook. This code is removed in production builds via dead-code elimination.

```typescript
function useAppState() {
  const [state, setState] = useState({ count: 0 });

  if (process.env.NODE_ENV !== "production") {
    useEffect(() => {
      console.log("State changed:", state);
    }, [state]);
  }

  return { state, setState };
}

const [Provider, useAppState] = constate(useAppState);
```

--------------------------------

### Redux Selector Memoization Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Demonstrates Redux's `reselect` for memoizing selectors and highlights that constate's selectors are memoized by default. Use constate's direct selector approach for performance.

```typescript
const selectCount = createSelector(
  (state) => state.counter,
  (counter) => counter.count
);

// Constate way
const [Provider, useCount] = constate(
  useCounter,
  (value) => value.count,
);
```

--------------------------------

### Unnecessary Re-renders Example

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

Demonstrates how all descendants re-render when the hook value changes in a basic Constate setup. This can lead to performance issues in complex applications.

```typescript
const [Provider, useValue] = constate(() => {
  const [count, setCount] = useState(0);
  return { count };
});

// All children re-render when count changes
function App() {
  return (
    <Provider>
      <Child1 /> {/* Re-renders */}
      <Child2 /> {/* Re-renders */}
      <Child3 /> {/* Re-renders */}
    </Provider>
  );
}
```

--------------------------------

### Zustand vs. Constate: Store with Methods

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Illustrates how to manage state and methods using Zustand's `create` function versus constate's hook-based approach. Constate separates state logic into a custom hook.

```typescript
// Zustand way
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Constate way
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((c) => c + 1), []);
  return { count, increment };
}
const [Provider, useCounterContext] = constate(useCounter);
```

--------------------------------

### Directory Structure

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/README.md

Overview of the documentation structure for the constate project.

```bash
output/
├── README.md (this file)
├── api-reference/
│   ├── constate.md          (Main factory function)
│   ├── provider.md          (Provider component)
│   ├── context-hooks.md     (Consumer hooks)
│   ├── selectors.md         (Selector pattern)
│   └── debugging.md         (Development features)
├── types.md                 (Type definitions)
├── configuration.md         (Config and env vars)
├── errors.md               (Error handling)
├── quick-reference.md      (Quick syntax reference)
├── patterns-and-examples.md (Real-world examples)
├── implementation.md       (Internal implementation)
├── testing-guide.md        (Testing strategies)
└── migration-and-comparison.md (Comparison with other libraries)
```

--------------------------------

### With Selectors (Optimization)

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/constate.md

Illustrates using `constate` with selector functions to create separate contexts for different parts of the state, optimizing re-renders.

```APIDOC
## With Selectors (Optimization)

### Description

This example utilizes selector functions with `constate`. Each selector creates its own context (`useCount` and `useIncrement` contexts in this case). Components consuming these specific hooks will only re-render when the value provided by their respective selector changes, leading to better performance.

### Code

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

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

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

function App() {
  return (
    <CounterProvider>
      <Counter />
      <Incrementer />
    </CounterProvider>
  );
}

function Counter() {
  // Only re-renders when count changes
  const count = useCount();
  return <div>Count: {count}</div>;
}

function Incrementer() {
  // Never re-renders (increment reference is stable)
  const increment = useIncrement();
  return <button onClick={increment}>Increment</button>;
}
```
```

--------------------------------

### Basic Constate Usage

Source: https://github.com/diegohaz/constate/blob/main/README.md

Demonstrates the basic pattern of creating a context provider and consumer using constate. Wrap components with the Provider and use the generated hook in child components to access state and functions.

```jsx
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>
  );
}
```

--------------------------------

### ConstaTe Basic Syntax - With Selectors

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/quick-reference.md

Create a context provider and multiple context hooks using selectors to extract specific values from the context.

```typescript
const [Provider, useA, useB, useC] = constate(
  useHook,
  (value) => value.a,
  (value) => value.b,
  (value) => value.c,
);
```

--------------------------------

### Example of Missing Provider for Anonymous Hook

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/debugging.md

Shows the error condition when a context hook from an anonymous hook is called without its Provider.

```typescript
const [Provider, useValue] = constate(() => ({ count: 0 }));

function App() {
  useValue(); // Error: hook is anonymous
}
```

--------------------------------

### Provider Display Name in Development

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

Shows how the Provider component gets a 'displayName' in development mode for easier debugging in React DevTools.

```typescript
const [Provider] = constate(useCounter);
Provider.displayName; // "Constate" (when useCounter has a name)
```

--------------------------------

### Create Mock Provider with Initial Data

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/testing-guide.md

A pattern for creating a mock provider that accepts initial data. This is useful for testing components that rely on context with specific pre-defined states.

```typescript
function createMockProvider(initialData: any) {
  return function MockProvider({ children }: { children: React.ReactNode }) {
    return (
      <CounterProvider>
        {children}
      </CounterProvider>
    );
  };
}
```

--------------------------------

### With Provider Props

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/constate.md

Shows how to pass props to the Provider component, which are then used to initialize the underlying custom hook.

```APIDOC
## With Provider Props

### Description

This example demonstrates passing props to the `CounterProvider`. The `initialCount` prop is passed down to the `useCounter` hook, allowing for configurable initial state when the provider is rendered.

### Code

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

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

const [CounterProvider, useCounterContext] = constate(useCounter);

function App() {
  return (
    <CounterProvider initialCount={10}>
      <Counter />
      <Incrementer />
    </CounterProvider>
  );
}
```
```

--------------------------------

### Runtime Configuration via Provider Props

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/configuration.md

Demonstrates how to configure hook behavior at runtime by passing specific props to the Provider component. These props are directly used to initialize or modify the hook's state and logic.

```typescript
// Configure behavior via hook implementation
function useAppState({ theme = "light", locale = "en" } = {}) {
  const [state] = useState({ theme, locale });
  // ...
  return state;
}

const [Provider, useAppState1] = constate(useAppState);

// Apply configuration at Provider usage
<Provider theme="dark" locale="es">
  <App />
</Provider>
```

--------------------------------

### ConstaTe Basic Syntax - No Selectors

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/quick-reference.md

Create a context provider and a context hook without using selectors.

```typescript
const [Provider, useValue] = constate(useHook);
```

--------------------------------

### Basic Provider Component Usage

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/configuration.md

Demonstrates the basic usage of the Provider component returned by constate, wrapping child components to provide context.

```typescript
import { constate } from "constate";

const [Provider, useValue] = constate(() => ({ count: 0 }));

function App() {
  return (
    <Provider>
      <Child1 />
      <Child2 />
      <Child3 />
    </Provider>
  );
}
```

--------------------------------

### Hooks Type Example: One Selector

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/types.md

Shows the 'Hooks' type when a single selector is provided to constate. Results in a single hook that returns the value extracted by that selector.

```typescript
// One selector: single hook returning the selected value
const [Provider2, useCount] = constate(
  useCounter,
  (value) => value.count,
);
// useCount: () => number
```

--------------------------------

### Mocking Constate Providers for Tests

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/patterns-and-examples.md

Illustrates how to create a mock provider for testing purposes. This is useful for isolating components or testing specific hook behaviors without the full provider logic.

```typescript
function createMockProvider(initialValue: any) {
  return function MockProvider({ children }: { children: React.ReactNode }) {
    return <>{children}</>;
  };
}

// In tests, replace real provider with mock
const [MockProvider] = constate(() => ({ count: 0 }));
```

--------------------------------

### Hooks Type Example: No Selectors

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/types.md

Demonstrates the 'Hooks' type when no selectors are passed to constate. Results in a single hook that provides the complete return value of the custom hook.

```typescript
// No selectors: single hook returning the complete value
const [Provider1, useValue] = constate(useCounter);
// useValue: () => { count: number; increment: () => void }
```

--------------------------------

### Selector Functions

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/README.md

Examples of selector functions used with constate to extract specific parts of the hook's return value. This enables optimized, fine-grained subscriptions to context updates.

```typescript
(value) => value.count,
(value) => value.increment,
```

--------------------------------

### Basic Usage (No Selectors)

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/constate.md

Demonstrates how to use `constate` without any selectors, providing the entire return value of the custom hook through a single context.

```APIDOC
## Basic Usage (No Selectors)

### Description

This example shows the simplest form of `constate` usage where no selector functions are provided. The `CounterProvider` will provide the entire object returned by `useCounter` to any component consuming the `useCounterContext` hook.

### Code

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

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

const [CounterProvider, useCounterContext] = constate(useCounter);

function App() {
  return (
    <CounterProvider>
      <Counter />
      <Incrementer />
    </CounterProvider>
  );
}

function Counter() {
  const { count } = useCounterContext();
  return <div>Count: {count}</div>;
}

function Incrementer() {
  const { increment } = useCounterContext();
  return <button onClick={increment}>Increment</button>;
}
```
```

--------------------------------

### ConstaTe TypeScript Usage - Type a Custom Hook

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/quick-reference.md

Example of typing a custom hook (`useCounter`) that will be used with ConstaTe. This ensures type safety for the hook's return value.

```typescript
interface CounterValue {
  count: number;
  setCount: (count: number) => void;
}

function useCounter(): CounterValue {
  const [count, setCount] = useState(0);
  return { count, setCount };
}
```

--------------------------------

### Usage Pattern: Conditional Rendering

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/context-hooks.md

Demonstrates how to handle cases where the context data might be null or undefined, enabling conditional rendering of components based on the presence of data.

```APIDOC
### Conditional Rendering

```typescript
const [Provider, useData] = constate(() => {
  const [data, setData] = useState<Data | null>(null);
  return { data, setData };
});

function DataDisplay() {
  const { data } = useData();

  if (!data) {
    return <div>No data loaded</div>;
  }

  return <div>{data.content}</div>;
}
```
```

--------------------------------

### ConstaTe Common Pattern - Single State

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/quick-reference.md

A common pattern for managing single state using ConstaTe. This example demonstrates a counter hook and its usage with a Provider and a consuming component.

```typescript
function useCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}

const [Provider, useCounterContext] = constate(useCounter);

function App() {
  return (
    <Provider>
      <Component />
    </Provider>
  );
}

function Component() {
  const { count, setCount } = useCounterContext();
  return <div>{count}</div>;
}
```

--------------------------------

### Array and Object Filtering in Selectors

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/selectors.md

Filter or transform data within selectors, such as getting only active or completed todos. This avoids unnecessary re-renders for components that only need a subset of the data.

```typescript
function useTodoList() {
  const [todos, setTodos] = useState([
    { id: 1, title: "Learn Constate", done: true },
    { id: 2, title: "Build app", done: false },
    { id: 3, title: "Deploy", done: false },
  ]);
  return { todos, setTodos };
}

const [Provider, useAllTodos, useActiveTodos, useCompletedTodos] = constate(
  useTodoList,
  (value) => value.todos,
  (value) => value.todos.filter((t) => !t.done),    // Active todos
  (value) => value.todos.filter((t) => t.done),     // Completed todos
);

function ActiveTodosList() {
  const activeTodos = useActiveTodos();
  return (
    <ul>
      {activeTodos.map((t) => <li key={t.id}>{t.title}</li>)}
    </ul>
  );
}
```

--------------------------------

### Basic Provider Usage

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

Demonstrates the basic usage of the Provider component to wrap child elements and make context values available.

```typescript
const [Provider, useValue] = constate(() => ({ count: 0 }));

<Provider>
  <div>
    <Child1 />
    <Child2 />
  </div>
</Provider>
```

--------------------------------

### Usage Pattern: Basic Consumption

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/context-hooks.md

Demonstrates how to consume context values using a single hook when no selectors are provided. The hook returns the entire context object, which can then be destructured.

```APIDOC
## Usage Patterns

### Basic Consumption

```typescript
const [Provider, useValue] = constate(() => ({
  user: "Alice",
  count: 42,
}));

function UserDisplay() {
  const { user } = useValue();
  return <div>User: {user}</div>;
}

function CountDisplay() {
  const { count } = useValue();
  return <div>Count: {count}</div>;
}
```
```

--------------------------------

### Basic Usage of Constate

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/README.md

Demonstrates the fundamental pattern of creating a custom hook, wrapping it with constate, and using the generated provider and context hooks in React components. Ensure the Provider wraps the components that consume the context.

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

// 1. Create a custom hook
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((c) => c + 1);
  return { count, increment };
}

// 2. Wrap with constate
const [CounterProvider, useCounterContext] = constate(useCounter);

// 3. Use in components
function App() {
  return (
    <CounterProvider>
      <Counter />
      <Button />
    </CounterProvider>
  );
}

function Counter() {
  const { count } = useCounterContext();
  return <div>{count}</div>;
}

function Button() {
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button>;
}
```

--------------------------------

### Hooks Type Example: Multiple Selectors

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/types.md

Illustrates the 'Hooks' type when multiple selectors are provided to constate. Results in multiple hooks, each corresponding to one selector and returning its extracted value.

```typescript
// Multiple selectors: multiple hooks, one per selector
const [Provider3, useCount, useIncrement] = constate(
  useCounter,
  (value) => value.count,
  (value) => value.increment,
);
// useCount: () => number
// useIncrement: () => (() => void)
```

--------------------------------

### Context Nesting with Selectors

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

Demonstrates how the Provider component creates nested context providers when selectors are provided to constate.

```typescript
const [Provider, useCount, useIncrement] = constate(
  useCounter,
  (value) => value.count,      // Selector 1
  (value) => value.increment,  // Selector 2
);

// Rendered as:
// <Context1.Provider>
//   <Context2.Provider>
//     {children}
//   </Context2.Provider>
// </Context1.Provider>
```

--------------------------------

### Simple State Management with useState

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/patterns-and-examples.md

Create a simple state for basic values using useState. This pattern is suitable for straightforward state needs.

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

function useTheme() {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  return { theme, setTheme };
}

const [ThemeProvider, useThemeContext] = constate(useTheme);

function Header() {
  const { theme } = useThemeContext();
  return <header style={{ background: theme === "light" ? "#fff" : "#000" }} />;
}

function ThemeToggle() {
  const { theme, setTheme } = useThemeContext();
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle ({theme})
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <Header />
      <ThemeToggle />
    </ThemeProvider>
  );
}
```

--------------------------------

### Missing Provider Warning (Anonymous Hook/Selectors)

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/errors.md

This example shows the warning for missing providers when the constate hook is anonymous or uses selectors. The warning message differs from named hooks and appears only in development.

```typescript
const [Provider, useValue] = constate(() => ({ count: 0 }));

// Missing Provider
function App() {
  useValue(); // Triggers warning
  return <div />;
}
```

--------------------------------

### Testing State Management with React Testing Library

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/patterns-and-examples.md

Demonstrates how to test a Constate provider and hook using React Testing Library. Ensure the provider wraps the component being tested.

```typescript
import { render, screen } from "@testing-library/react";

const [Provider, useValue] = constate(() => ({ count: 0 }));

function Display() {
  const { count } = useValue();
  return <div>{count}</div>;
}

test("renders count from context", () => {
  render(
    <Provider>
      <Display />
    </Provider>
  );

  expect(screen.getByText("0")).toBeDefined();
});
```

--------------------------------

### Missing Provider Warning (Named Hook)

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/errors.md

This example demonstrates the warning triggered when a context hook, defined with a function name, is used without its corresponding Provider. This warning occurs only in development mode.

```typescript
function useCounter() {
  const [count, setCount] = useState(0);
  return { count };
}

const [CounterProvider, useCounterContext] = constate(useCounter);

// Missing Provider
function App() {
  useCounterContext(); // Triggers warning
  return <div />;
}
```

--------------------------------

### Provider Prop Type Safety Examples

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/configuration.md

Showcases how TypeScript infers prop types for the Provider component based on the signature of the custom hook. This ensures compile-time validation of props passed to the Provider.

```typescript
// Hook accepts no props
function useSimple() {
  return { value: 42 };
}
const [Provider1, useSimple1] = constate(useSimple);
<Provider1></Provider1>; // OK
<Provider1 x={1}></Provider1>; // TypeScript Error: x does not exist

// Hook accepts optional props
function useWithProps({ initial = 0 } = {}) {
  const [count, setCount] = useState(initial);
  return { count };
}
const [Provider2, useWithProps1] = constate(useWithProps);
<Provider2></Provider2>; // OK (default empty object)
<Provider2 initial={10}></Provider2>; // OK
<Provider2 initial="ten"></Provider2>; // TypeScript Error: string not assignable to number

// Hook requires specific props
function useRequired({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);
  return { user };
}
const [Provider3, useRequired1] = constate(useRequired);
<Provider3></Provider3>; // TypeScript Error: userId is required
<Provider3 userId="123"></Provider3>; // OK
```

--------------------------------

### Replacing Multiple Context Providers with Constate

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/migration-and-comparison.md

Demonstrates migrating from nested Context API providers to a more organized structure using multiple constate providers.

```typescript
function App() {
  return (
    <AuthContext.Provider value={authValue}>
      <ThemeContext.Provider value={themeValue}>
        <NotificationContext.Provider value={notificationValue}>
          <MainApp />
        </NotificationContext.Provider>
      </ThemeContext.Provider>
    </AuthContext.Provider>
  );
}
```

```typescript
const [AuthProvider, useAuth] = constate(useAuthHook);
const [ThemeProvider, useTheme] = constate(useThemeHook);
const [NotificationProvider, useNotifications] = constate(useNotificationsHook);

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationProvider>
          <MainApp />
        </NotificationProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}
```

--------------------------------

### Testing Console Warnings

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/implementation.md

Shows how to mock `console.warn` to verify that specific warnings are issued by the component when it's rendered without a Provider.

```typescript
vi.spyOn(console, "warn").mockImplementation(() => {});
render(<ComponentWithoutProvider />);
expect(console.warn).toHaveBeenCalled();
```

--------------------------------

### Usage Pattern: Multiple Hooks in Same Component

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/context-hooks.md

Shows how to use multiple context hooks (generated with selectors) within the same component to access different pieces of state independently.

```APIDOC
### Multiple Hooks in Same Component

```typescript
const [Provider, useUser, useSettings] = constate(
  useAppState,
  (state) => state.user,
  (state) => state.settings,
);

function AppHeader() {
  const user = useUser();
  const settings = useSettings();

  return (
    <header>
      <span>Hello, {user.name}</span>
      <select value={settings.theme}>
        <option>light</option>
        <option>dark</option>
      </select>
    </header>
  );
}
```
```

--------------------------------

### Nested Property Selection with Constate

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/selectors.md

Shows how to extract deeply nested properties using selectors in Constate. This example creates separate contexts for user name and user theme, allowing components to subscribe only to these specific values.

```typescript
function useUserData() {
  const [user, setUser] = useState({
    profile: { name: "Alice", age: 30 },
    settings: { theme: "dark" },
  });
  return { user, setUser };
}

const [Provider, useUserName, useUserTheme] = constate(
  useUserData,
  (value) => value.user.profile.name,     // Nested selection
  (value) => value.user.settings.theme,   // Nested selection
);

function UserHeader() {
  const name = useUserName();
  const theme = useUserTheme();
  return <header>{name} - {theme}</header>;
}
```

--------------------------------

### Create Context Hooks with Nested Hooks

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/constate.md

Define a custom hook that uses other React hooks (like useState) and then create context hooks using Consta. This example shows how to extract specific values and callbacks from the custom hook's return value.

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

function useCounter() {
  const [count, setCount] = useState(0);
  const decrement = () => setCount((prev) => prev - 1);
  return { count, decrement };
}

const [CounterProvider, useCount, useDecrement] = constate(
  useCounter,
  (value) => value.count,
  (value) => useCallback(value.decrement, [value.count]),
);
```

--------------------------------

### Basic Usage of constate (No Selectors)

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/constate.md

Demonstrates how to use constate to create a global state for a counter without selectors. The Provider component wraps the application, and a custom hook provides the state and update function.

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

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

const [CounterProvider, useCounterContext] = constate(useCounter);

function App() {
  return (
    <CounterProvider>
      <Counter />
      <Incrementer />
    </CounterProvider>
  );
}

function Counter() {
  const { count } = useCounterContext();
  return <div>Count: {count}</div>;
}

function Incrementer() {
  const { increment } = useCounterContext();
  return <button onClick={increment}>Increment</button>;
}
```

--------------------------------

### Function Closure for Context Creation

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/implementation.md

Shows how a closure is created over contexts, hooks, and selectors. This pattern avoids the need to pass these parameters explicitly when creating a context.

```typescript
const createContext = (displayName: string) => { ... }
```

--------------------------------

### Constate Factory Function Usage

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/README.md

Demonstrates how to use the constate factory function to create a Provider and context hooks. Supports optional selectors for fine-grained context updates.

```typescript
const [Provider, useValue] = constate(useHook);
const [Provider, useA, useB] = constate(useHook, selectA, selectB);
```

--------------------------------

### Hook Execution with Props

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/api-reference/provider.md

Illustrates how the custom hook is executed with provided props each time the Provider renders.

```typescript
function useTracker({ name } = {}) {
  console.log(`useTracker called with name=${name}`);
  const [value, setValue] = useState(0);
  return { value, setValue };
}

const [Provider, useValue] = constate(useTracker);

// Output:
// "useTracker called with name=Alice"
<Provider name="Alice">
  <Child />
</Provider>;

// Output:
// "useTracker called with name=Bob"
<Provider name="Bob">
  <Child />
</Provider>;
```

--------------------------------

### Testing Hooks with Provider Wrapper

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/implementation.md

Demonstrates how to test custom hooks created by constate. The Provider must be supplied as a wrapper component to ensure the hook can access its context.

```typescript
const { result } = renderHook(() => useValue(), {
  wrapper: Provider,
});
```

--------------------------------

### ConstaTe Common Pattern - Multiple Providers

Source: https://github.com/diegohaz/constate/blob/main/_autodocs/quick-reference.md

Demonstrates nesting multiple ConstaTe providers to manage different aspects of application state, such as authentication and theming.

```typescript
<AuthProvider>
  <ThemeProvider>
    <NotificationProvider>
      <App />
    </NotificationProvider>
  </ThemeProvider>
</AuthProvider>
```