v3.6.14
Discord
Source code

use-set-state

useState wrapper to work with state like in class components
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

use-state hook works similar to how this.setState works in class components – it shallow merges state partial into current state.

const [state, setState] = useSetState({ name: 'John', age: 35, job: 'Engineer' });


state; // -> { name: 'John', age: 35, job: 'Engineer' }


setState({ name: 'Jane' }); // -> { name: 'Jane', age: 35, job: 'Engineer' }
setState({ age: 25, job: 'Manager' }); // -> { name: 'Jane', age: 25, job: 'Manager' }
setState((current) => ({ age: current.age + 7 })); // -> { name: 'Jane', age: 32, job: 'Manager' }

Note that hook can work only with objects: primitive values and arrays are not supported:

useSetState([1, 2, 3]); // -> will not work
useSetState(1); // -> will not work
useSetState({ skills: ['JavaScript', 'TypeScript'] }); // -> works fine

Definition

function useSetState<T extends Record<string, any>>(
  initialState: T
): readonly [T, (statePartial: Partial<T> | ((currentState: T) => Partial<T>)) => void];
Go back
use-queue – @mantine/hooks
Up next
use-toggle – @mantine/hooks
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter