createReState

Creates a reusable hook for a specific global state. Unlike useReState where you pass the key every time, createReState binds the key once and returns a ready-to-use hook.

Why use createReState?

Encapsulation: Define state key and type in one place
Reusability: Export a named hook that's easy to import
Type safety: TypeScript types are defined once, not repeated
Cleaner imports: Components import useMuted() instead of useReState('muted', false)

Basic Usage

// states/muted.ts
import { createReState } from '@raulpesilva/re-state';
 
export const useMuted = createReState<boolean>('muted', false);

// components/MuteButton.tsx
import { useMuted } from '../states/muted';
 
function MuteButton() {
  const [muted, setMuted] = useMuted();
 
  return (
    <button onClick={() => setMuted(!muted)}>
      {muted ? 'Unmute' : 'Mute'}
    </button>
  );
}

Examples

Sharing State Across Components

// states/volume.ts
import { createReState } from '@raulpesilva/re-state';
 
export const useVolume = createReState<number>('volume', 50);

// components/VolumeSlider.tsx
import { useVolume } from '../states/volume';
 
function VolumeSlider() {
  const [volume, setVolume] = useVolume();
 
  return (
    <input
      type="range"
      min="0"
      max="100"
      value={volume}
      onChange={e => setVolume(Number(e.target.value))}
    />
  );
}

// components/VolumeDisplay.tsx
import { useVolume } from '../states/volume';
 
function VolumeDisplay() {
  const [volume] = useVolume();
  return <p>Volume: {volume}%</p>;
}

Both components share the same volume state.

Complex State Types

// states/user.ts
import { createReState } from '@raulpesilva/re-state';
 
interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}
 
const initialUser: User = {
  id: '',
  name: '',
  email: '',
  avatar: '',
};
 
export const useUser = createReState<User>('user', initialUser);

// components/UserCard.tsx
import { useUser } from '../states/user';
 
function UserCard() {
  const [user, setUser] = useUser();
 
  const updateName = (name: string) => {
    setUser(prev => ({ ...prev, name }));
  };
 
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <input
        value={user.name}
        onChange={e => updateName(e.target.value)}
      />
    </div>
  );
}

Multiple States in One File

// states/audio.ts
import { createReState } from '@raulpesilva/re-state';
 
export const useVolume = createReState<number>('volume', 50);
export const useMuted = createReState<boolean>('muted', false);
export const usePlaying = createReState<boolean>('playing', false);

// components/AudioControls.tsx
import { useVolume, useMuted, usePlaying } from '../states/audio';
 
function AudioControls() {
  const [volume, setVolume] = useVolume();
  const [muted, setMuted] = useMuted();
  const [playing, setPlaying] = usePlaying();
 
  return (
    <div>
      <button onClick={() => setPlaying(!playing)}>
        {playing ? 'Pause' : 'Play'}
      </button>
      <button onClick={() => setMuted(!muted)}>
        {muted ? 'Unmute' : 'Mute'}
      </button>
      <input
        type="range"
        value={volume}
        onChange={e => setVolume(Number(e.target.value))}
        disabled={muted}
      />
    </div>
  );
}

API Reference

function createReState<S>(
  key: string,
  initialValue?: S
): () => [S, (value: S | ((prev: S) => S)) => void]

Parameters

Parameter	Type	Required	Description
`key`	`string`	Yes	Unique identifier for the state
`initialValue`	`S`	No	Initial value of the state

Returns

A hook function that returns a tuple:

Index	Type	Description
`[0]`	`S`	Current state value
`[1]`	`(value: S \| ((prev: S) => S)) => void`	Function to update the state

Comparison

Feature	`useReState`	`createReState`
Key passed at	Call site	Definition
Best for	Quick prototyping	Reusable state modules
Type defined at	Each usage	Once
Import style	`useReState('key', value)`	`useMyState()`

When to Use

Scenario	Recommendation
Single state, need just the hook	`createReState`
Need dispatch/get/reset utilities	`createReStateMethods`
Quick inline state	`useReState`
Full state management solution	`createReStateMethods`

For most production use cases, consider createReStateMethods which gives you all utilities (useX, useXSelect, dispatchX, getX, resetX) in one call.

useReState createReStateDispatch