useUserData

Overview

The useUserData hook provides a simple interface for accessing and updating a user object within your component. It wraps useUpdateUser to offer a higher-level API for updating user details, while also managing local state through a provided setUser function. It is useful in components that already have user data and want to support real-time updates (e.g., updating a name, avatar, or bio).

Usage Example

import { useUserData } from "@replyke/react-js";
 
function ProfileSettings({
  user,
  setUser,
}: {
  user: UserLean | null;
  setUser: (newUser: UserLean) => void;
}) {
  const { updateUser } = useUserData({ user, setUser });
 
  const handleChangeName = async () => {
    try {
      await updateUser({ name: "New Name" });
    } catch (err) {
      console.error("Failed to update user:", err);
    }
  };
 
  return (
    <div>
      <button onClick={handleChangeName}>Change Name</button>
    </div>
  );
}

Parameters & Returns

Parameters

The hook accepts an object with the following fields:

ParameterTypeRequiredDescription
userUserLean | nullYesThe user object to be managed and updated.
setUser(newUser: UserLean) => voidYesFunction to update the local user state after a successful mutation.

Returns

Return ValueTypeDescription
userUserLean | null | undefinedThe current user object passed to the hook.
updateUser(update: UpdateUserParams) => Promise<void>Function to update the user by passing a partial update object. Automatically applies the changes to local state via setUser.