useMutableState

A alternative to setState that allows you to change state in a Svelte like syntax.

Installation

npx rabbithook@latest add use-mutable-state

Usage

App.tsx

import useMutableState from "@/hooks/use-mutable-state";

function Component() {
  const count = useMutableState(0);

  return (
    <>
      <div>Count: { count.value }</div>
      <button onClick={() => count.value++}>Increment</button>
    </>
  );
}

Code

Typescript

use-mutable-state.ts

import { useState } from "react";

interface IUseMutableState<T> {
  value: T;
}

function useMutableState<T>(initialValue: T): IUseMutableState<T> {
  const [state, setState] = useState(initialValue);

  return {
    get value() {
      return state;
    },
    set value(value: T) {
      setState(value);
    }
  }
}

export default useMutableState;

Javascript

use-mutable-state.js

import { useState } from "react";

function useMutableState(initialValue) {
  const [state, setState] = useState(initialValue);

  return {
    get value() {
      return state;
    },
    set value(value) {
      setState(value);
    }
  }
}

export default useMutableState;