> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userpilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Identify vs Reload

> Understand the difference between userpilot.identify and userpilot.reload, and when to use each.

## Overview

Userpilot provides two key functions for managing user sessions and content targeting: `userpilot.identify` and `userpilot.reload`. Understanding when and how to use each is essential for accurate user tracking and seamless content delivery, especially in modern web applications and Single Page Apps (SPAs).

***

## userpilot.identify

The `userpilot.identify` function is used to uniquely identify a user and set their properties. This is typically called on the first page load after authentication, but can also be called whenever user properties change.

**When to use:**

* On initial page load after user authentication.
* Whenever user properties (such as name, plan, or preferences) change during a session.

**Example: Initial identification**

```javascript theme={null}
userpilot.identify("443", // Unique user ID
  { 
    name: "James",
    created_at: "2019-10-17", // ISO8601 Date
    plan: "Trial"
    // Additional user properties
    // projectId: "1"
    // trialEnds: "2019-10-31" // ISO8601 Date
  }
);
```

**Example: Updating user properties**
If a user changes a property (e.g., their app color), you can call `identify` again with the new property:

```javascript theme={null}
userpilot.identify("443", { color: "blue" });
```

> You can call `userpilot.identify` multiple times on the same page as user properties change.

***

## userpilot.reload

The `userpilot.reload` function refreshes Userpilot content based on the current page state or URL. This is especially important in Single Page Applications (SPAs), where the URL or page content can change without a full page reload.

**When to use:**

* After calling `userpilot.identify` (never before).
* On every route or URL change in SPAs (e.g., React, Angular, Vue).
* When you want Userpilot to re-evaluate which content to show based on the new page state.

**Example: React route change**

```javascript theme={null}
import { useLocation } from "react-router-dom";

const location = useLocation();

React.useEffect(() => {
  if (isAuthenticated) {
    userpilot.reload();
  }
}, [location]);
```

**Example: Angular router events**

```typescript theme={null}
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    const token = localStorage.getItem('token');
    if (token) {
      userpilot.reload();
    }
  });
}
```

**Example: Vue router**

```javascript theme={null}
router.afterEach((route) => {
  userpilot.reload();
});
```

> **Note:** Calling `userpilot.reload` before identifying the user will have no effect. Always ensure the user is identified first.

***

## Summary Table

| Function             | When to Use                                                      | Example Use Case                       |
| -------------------- | ---------------------------------------------------------------- | -------------------------------------- |
| `userpilot.identify` | On first load after login, or when user properties change        | User logs in, updates profile info     |
| `userpilot.reload`   | After identify, on SPA route changes, or to refresh Userpilot UI | User navigates to a new page in an SPA |

***

<Frame>
  For more details, see the [JavaScript SDK Reference](/developer/installation/SDK-APIs) or contact [support@userpilot.com](mailto:support@userpilot.com).
</Frame>