useReState

A hook for sharing state between React components. Works like useState, but the state is global and accessible from any component using the same key.

Why use useReState?

Familiar API: Same [value, setValue] pattern as useState
Zero setup: No providers, no context, no boilerplate
Instant sharing: Any component with the same key shares the same state
Quick prototyping: Perfect for simple shared states

Basic Usage

import { useReState } from '@raulpesilva/re-state';
 
function Counter() {
  const [count, setCount] = useReState('count', 0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

Examples

Sharing State Between Components

Components using the same key automatically share state:

import { useReState } from '@raulpesilva/re-state';
 
function IncrementButton() {
  const [count, setCount] = useReState('count', 0);
  return <button onClick={() => setCount(count + 1)}>Add +1</button>;
}
 
function DecrementButton() {
  const [count, setCount] = useReState('count', 0);
  return <button onClick={() => setCount(count - 1)}>Remove -1</button>;
}
 
function Display() {
  const [count] = useReState('count', 0);
  return <p>Current count: {count}</p>;
}
 
function App() {
  return (
    <div>
      <Display />
      <IncrementButton />
      <DecrementButton />
    </div>
  );
}

All three components share the same count state. Clicking either button updates the display.

Using Previous State

Update state based on the previous value using a callback:

import { useReState } from '@raulpesilva/re-state';
 
function Counter() {
  const [count, setCount] = useReState('count', 0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>+</button>
      <button onClick={() => setCount(prev => prev - 1)}>-</button>
    </div>
  );
}

Typed State

Use TypeScript generics for type safety:

import { useReState } from '@raulpesilva/re-state';
 
interface User {
  name: string;
  email: string;
}
 
function UserProfile() {
  const [user, setUser] = useReState<User>('user', {
    name: '',
    email: '',
  });
 
  return (
    <div>
      <input
        value={user.name}
        onChange={e => setUser(prev => ({ ...prev, name: e.target.value }))}
        placeholder="Name"
      />
      <input
        value={user.email}
        onChange={e => setUser(prev => ({ ...prev, email: e.target.value }))}
        placeholder="Email"
      />
    </div>
  );
}

Toggle State

Common pattern for boolean states:

import { useReState } from '@raulpesilva/re-state';
 
function ThemeToggle() {
  const [isDark, setIsDark] = useReState('theme-dark', false);
 
  return (
    <button onClick={() => setIsDark(prev => !prev)}>
      {isDark ? 'Switch to Light' : 'Switch to Dark'}
    </button>
  );
}
 
function App() {
  const [isDark] = useReState('theme-dark', false);
 
  return (
    <div className={isDark ? 'dark' : 'light'}>
      <ThemeToggle />
      <p>Current theme: {isDark ? 'Dark' : 'Light'}</p>
    </div>
  );
}

API Reference

function useReState<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 (used only if state doesn't exist)

Returns

A tuple with two elements:

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

When to Use

Scenario	Recommendation
Quick prototyping	`useReState`
Simple shared state	`useReState`
Production app with many states	`createReStateMethods`
Need dispatch/get outside components	`createReStateMethods`
Type-safe reusable state modules	`createReStateMethods`

setReStateInitialValue createReState