---
title: Global events
group: Documents
---

# Global Events

ReactLynx provides a series of global events that allow developers to listen and respond to application-level state changes. You can easily subscribe to these events in your components using the {@link useLynxGlobalEventListener} hook.

## onGlobalPropsChanged

The `onGlobalPropsChanged` event is triggered when the [`lynx.__globalProps`](https://lynxjs.org/api/lynx-api/lynx/lynx-global-props) object changes, automatically re-rendering the entire page afterward.
This is useful for components that need to react to global configuration changes, such as themes, languages, etc.

As a result, `onGlobalPropsChanged` is mainly used for handling side effects that are **not directly related to UI rendering**, such as data fetching.

The callback function for this event does not receive any arguments; you can read the latest state directly from [`lynx.__globalProps`](https://lynxjs.org/api/lynx-api/lynx/lynx-global-props).

```tsx
import { useLynxGlobalEventListener } from '@lynx-js/react';

function App() {
  useLynxGlobalEventListener('onGlobalPropsChanged', () => {
    console.log('Global props changed:', lynx.__globalProps);
    // You can perform data fetching or other operations here
  });

  return <view>...</view>;
}
```

## onDataChanged

The `onDataChanged` event is triggered when {@link useInitData | initData} is updated by the client.

{@link useInitData} is a responsive hook that automatically triggers a component re-render when `initData` changes.
The `onDataChanged` event is primarily used to handle side effects that are **not directly related to UI rendering**, such as logging, data analytics, or executing other imperative operations.

```tsx
import { useLynxGlobalEventListener } from '@lynx-js/react';

function DataChangeLogger() {
  useLynxGlobalEventListener('onDataChanged', (data) => {
    console.log('initData changed:', data);
    // You can perform data reporting or other operations here
  });

  return <view>...</view>;
}
```