todor2810 / use-reactive-state

useReactiveState() - a reactive alternative to React's useState()

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useReactiveState() - a reactive alternative to React's useState()


Installation

$ npm install use-reactive-state

Example

useState() useReactiveState()
function Counter() {
  const [state, setState] = useState({count: 0});

  return (
    <div>
      <p>You clicked {state.count}</p>
      <button onClick={() => {
        setState({
          ...state,
          count: state.count + 1
        });
      }}>
        Click me
      </button>
    </div>
  );
}
function Counter() {
  const state = useReactiveState({count: 0});

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={() => { state.count += 1; }}>
        Click me
      </button>
    </div>
  );
}

Limitation of useReactiveState()

  • state cannot be destructured:
// This won't work
const {count} = useReactiveState({count: 0});
// This will work
const state = useReactiveState({count: 0});

About

useReactiveState() - a reactive alternative to React's useState()

License:MIT License


Languages

Language:TypeScript 96.6%Language:JavaScript 3.4%