useGlobalState

Installation

npm install @1hook/use-global-state

Quick Start

Define the global state

use-count.ts

import { defineGlobalState } from '@1hook/use-global-state'

export const [useCount] = defineGlobalState({ initialState: 0 })

Use like useState

const [count, setCount] = useCount()

Prevent unnecessary rerenders

To help prevent unnecessary rerenders, defineGlobalState provides a standalone setter function.
It helps prevent unnecessary rerenders by not listening to the state.

use-count.ts

export const [useCount, setCount] = defineGlobalState({ initialState: 0 })

✅ No rerender when count changes:

import { setCount } from './use-count'

function Increment1() {
  return (
    <button onClick={() => setCount((count) => count + 1)}>Increment</button>
  )
}

❌ Rerenders when count changes:

import { useCount } from './use-count'

function Increment1() {
  const [count, setCount] = useCount()

  return (
    <button onClick={() => setCount((count) => count + 1)}>Increment</button>
  )
}

useGlobalState

Installation

Quick Start

Define the global state

Use like useState

Prevent unnecessary rerenders

On this page