Trails Packages
    Preparing search index...

    Function useReactiveSnapshot

    • Evaluates the compute function and returns its result.

      The body of the compute function is tracked: it will be re-evaluated whenever its reactive dependencies change. The outer react component will re-render whenever compute returns a new value.

      NOTE: The return value of this hook should be considered read-only.

      NOTE: The options parameter (if used) should be memoized or constant.

      Type Parameters

      • T

      Parameters

      Returns T

      Simple Example:

      import { useReactiveSnapshot } from "@open-pioneer/reactivity";

      // A reactive signal from anywhere (global data, props, ...).
      const name = reactive("User");

      function YourComponent() {
          const nameSnapshot = useReactiveSnapshot(() => name.value);
          // snapshot is automatically up to date
      }

      Multiple values, with props:

      import { useReactiveSnapshot } from "@open-pioneer/reactivity";

      function YourComponent({firstName, lastName}) {
          // You can use complex expressions in your compute function,
          // just like in a computed signal.
          // React-dependencies used in the callback must be listed in the second argument,
          // just like when using `useMemo()` or `useEffect`.
          const snapshot = useReactiveSnapshot(() => {
              return {
                  firstName: firstName.value,
                  lastName: lastName.value,
                  fullName: `${firstName.value} ${lastName.value}`
              };
          }, [firstName, lastName]);
          // snapshot.firstName, snapshot.lastName, snapshot.fullName are available and up to date
      }

      Changing the default timing:

      import { useReactiveSnapshot, DISPATCH_SYNC } from "@open-pioneer/reactivity";

      function YourComponent(props) {
          // DISPATCH_SYNC rerenders us faster than the default timing.
          // This is useful for values used in input fields, in layout operations or focus management.
          // See also https://github.com/open-pioneer/trails-core-packages/issues/125
          const nameSnapshot = useReactiveSnapshot(() => props.reactiveModel.value, [props.reactiveModel], DISPATCH_SYNC);
      }

      This hook is based on () and ().

    Settings

    Member Visibility