---
title: useStateObject
---


import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { Popout } from '@freesewing/react/components/Popout'
import { Tab, Tabs } from '@freesewing/react/components/Tab'

<DocusaurusDoc>

The **useStateObject** hook provides state management with a `lodash.get`-style
update handler.

It allows one to update specific parts of a state object without having to
re-construct the new state object yourself.

It is named `useStateObject` because it is intended to be used for objects. Do
not use this for scalar values where React's native `useState` hook is a better fit.

## Example

```js
import { useStateObject } from '@freesewing/react/hooks/useStateObject'

const MyComponent = () => {
  const [value, update, replace] = useStateObject(initialObject)

  // ...
}
```

## Return value

This hook returns an array with three entries:

- [value](#value)
- [update](#update)
- [replace](#replace)

### value

This holds the current value of the object managed by this state.

### update

This method allows you to update the state. It takes two parameters:

```js
function update(
  string|array path, // The path to the property to set
  mixed value, // The value to set
)
```

The `path` can be specified as either a dot-notation path, or an array.
These two update calls are equivalent:

```js
// These do the same thing
update('some.nested.key', "new value here")
update(['some', 'nested', 'key'], "new value here")
```

You can also specify multiple update operations by passing them as an array
of arrays with `path` and `value` elements:

```js
// Update multiple keys in one call
update([
  [ 'some.nested.key', "new value here" ],
  [ ['some', 'other', 'key'], { some: "other value" } ],
  [ "one.more", "example" ]
])
```

### replace

This method takes a value that will completed replace the object kept in state.

</DocusaurusDoc>