Skip to main content

useStateObject

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​

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​

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:

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:

// 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:

// 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.