Simple Usage

re-state makes global state as simple as useState. No providers, no context, no boilerplate.

The Simplest Example

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>
    </div>
  );
}

That's it. The state is now global.

Sharing State Between Components

Any component using the same key shares the same state automatically:

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

Click any button and Display updates instantly. No prop drilling, no context providers.

How It Works

Same key = same state: Components using useReState('count', 0) all share the same count value
First value wins: The initial value (0) is only used when the state is first created
Updates are global: When any component calls setCount, all components re-render with the new value

Compare to Traditional React

Before (with Context)

// Create context
const CountContext = createContext();
 
// Create provider
function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}
 
// Wrap your app
function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}
 
// Use in components
function Counter() {
  const { count, setCount } = useContext(CountContext);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

After (with re-state)

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

No context, no provider, no wrapper. Just use it.

Next Steps

Once you're comfortable with useReState, explore more powerful patterns:

When you need...	Use
Reusable typed state modules	`createReStateMethods`
Update state outside components	`createReStateDispatch`
Read state without re-rendering	`createGetReState`
Select derived data from store	`useReStateSelector`

For production apps, we recommend createReStateMethods which gives you all utilities in one call:

// states/counter.ts
import { createReStateMethods } from '@raulpesilva/re-state';
 
export const {
  useCounter,        // Hook: [value, setValue]
  useCounterSelect,  // Hook: value only
  dispatchCounter,   // Update from anywhere
  getCounter,        // Read without subscribing
  resetCounter,      // Reset to initial value
} = createReStateMethods('counter', 0);

Learn more in the Hello re-state guide.

Recommended Usage createReStateMethods