better-react-use-state

better-react-use-state

A utility that improves React's useState to be safer and more convenient. Provides both useState (enhanced) and a dedicated useBoolState hook.

Overview

React's useState can cause unintended behavior when you want to hold a function as a state. better-react-use-state solves this problem and is a utility designed for safer state management. It is designed as a drop-in replacement for React's useState hook, with added functionality. better-react-use-state also provides a simplified hook, useBoolState, specifically for boolean state.

Installation

You can install it with any of the following:

``bash
npm install better-react-use-state
`

`bash
yarn add better-react-use-state
`

`bash
pnpm add better-react-use-state
`

Usage

$3

better-react-use-state's useState can be used the same way as React's useState.

`tsx
import { useState } from 'better-react-use-state';

const MyComponent: React.FC = () => {
const [name, setName] = useState('John Doe');

const [count, setCount, { updateState: updateCount }] = useState(0);

const onNameChange = React.useCallback((event) => {
setName(event.target.value);
}, []);

const incrementCount = React.useCallback(() => {
updateCount((x) => x + 1);
}, []);

return (



);
};
`

$3

useBoolState simplifies managing boolean state.

`tsx
import { useBoolState } from 'better-react-use-state';

const MyComponent: React.FC = () => {
const [isOpen, { setTrue: open, setFalse: close, toggleState }] =
useBoolState(false);

return (



);
};
`

API Reference

$3

`typescript
const [state, setState, { updateState, resetState }] = useState(initialState: T);
`

- state: The current state.
- setState: Function to update the state.
- updateState: Function to update the state based on the current state.
- resetState: Function to reset the state to the initial value.

#### updateState

`typescript
updateState(updateFn: (v: T) => T): void;
`

Updates the state by passing a function updateFn that takes the current state as an argument and returns the new state.

#### resetState

`typescript
resetState(): void;
`

Resets the state to the initial value.

$3

`typescript
const [state, { setState, setTrue, setFalse, resetState, toggleState, updateState }] = useBoolState(initialState: boolean);
`

- state: The current boolean value.
- setState: Function to update the boolean value directly.
- setTrue: Function to set the state to true.
- setFalse: Function to set the state to false.
- resetState: Function to reset the state to the initial value.
- toggleState: Function to toggle the boolean value (true to false, false to true).
- updateState: Function to update the state based on the current state.

#### setState

`typescript
setState(next: boolean): void;
`

Sets the state to the provided boolean value.

#### setTrue

`typescript
setTrue(): void;
`

Sets the state to true.

#### setFalse

`typescript
setFalse(): void;
`

Sets the state to false.

#### resetState

`typescript
resetState(): void;
`

Resets the state to the initial value.

#### toggleState

`typescript
toggleState(): void;
`

Toggles the current boolean value.

#### updateState

`typescript
updateState(updateFn: (v: boolean) => boolean): void;
`

Updates the state by passing a function updateFn that takes the current state as an argument and returns the new state. This is useful for updates that depend on the current state.

Benefits of this library

With React's standard useState, attempting to store a function as state can lead to unexpected behavior (the function being interpreted as an updater function). better-react-use-state solves this issue and, by providing updateState, allows functions to be safely held as state. Also, resetState lets you easily return the state to its initial value. useBoolState simplifies boolean state management in React, offering several advantages over directly using useState for booleans.

$3

Useful when you want to hold a function as state.

`typescript
const [fn, setFn, { updateState: updateFn }] = useState(initialFn); // Holds a function as state

// In React's standard useState, setFn(nextFn) interprets nextFn as an update function.

// If you want to update the state with an update function, you can use updateState instead.
updateFn((currentFn) => nextFn);
``

License

MIT