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.

      Type Parameters

      • T

      Parameters

      • compute: () => T
      • deps: DependencyList

      Returns T

      Simple Example:

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

      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
      }

      This hook is based on () and ().

    Settings

    Member Visibility