#Form.useDataValue

#Import

import { Form } from '@dnb/eufemia/extensions/forms'
// Use Form.useDataValue

#Description

Form.useDataValue(path) returns the current value at a JSON Pointer path and subscribes only to that path while used inside Form.Handler.

Use it when rendered output depends on one form data value. It rerenders when that path, a parent path or a child path changes, but not when unrelated form data or other form context state changes.

For custom field or value components, prefer useFieldProps or useValueProps for the component's own path.

Related helpers:

• Form.useData
• Form.useDataWithoutSubscription
• Form.getData

#Relevant links

• Source code
• Docs code

#Usage

import { Form } from '@dnb/eufemia/extensions/forms'

function MyComponent() {
  const name = Form.useDataValue<string>('/customer/name')

  return <output>{name}</output>
}

render(
  <Form.Handler data={{ customer: { name: 'Ada' } }}>
    <MyComponent />
  </Form.Handler>
)

#TypeScript support

You can define the value type returned from the path.

type MyData = { firstName: string }

const MyComponent = () => {
  const firstName = Form.useDataValue<MyData['firstName']>('/firstName')

  return firstName
}

#When to use it

Use Form.useDataValue for rendered values inside Form.Handler.

Use Form.useData when rendered output depends on the whole form data object.

Use Form.useDataWithoutSubscription for non-subscribing imperative reads or writes in callbacks, effects or internal handlers.