Function useGetState

Example

// Using for all props
function MyComponent() {
  const evaluatedProps = useGetState({
    title: async (state) => {
      const user = await fetchUser(state.userId);
      return `Welcome, ${user.name}!`;
    },
    subtitle: (state) => `You have ${state.notifications?.length || 0} notifications`,
    isVisible: true, // static value
  });

  return <SomeComponent {...evaluatedProps} />;
}

// Using for only some values - single state-driven value
function PartialUsageComponent() {
  const {title} = useGetState({
    title: async (state) => {
      const data = await api.getData(state.selectedId);
      return data.title;
    },
  });

  return (
    <div>
      <h1>{title}</h1>
      <button onClick={handleClick}>Static Button</button>
      <span className="static-class">Static content</span>
    </div>
  );
}

// Combining multiple state values with component props
function MultipleStateValuesComponent() {
  const stateValues = useGetState({
    userName: (state) => state.currentUser?.name || 'Guest',
    userCount: async (state) => {
      const users = await fetchUsers(state.filters);
      return users.length;
    },
  });

  const staticProps = {
    className: "my-static-class",
    onClick: myStaticHandler,
    variant: "primary"
  };

  return (
    <Card
      title={`Hello, ${stateValues.userName}!`}
      subtitle={`${stateValues.userCount} users online`}
      {...staticProps}
    />
  );
}
Copy