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.