# General Translation React SDKs (gt-react, gt-next, gt-react-native): useSetLocale
URL: https://generaltranslation.com/ja/docs/react/reference/hooks/use-set-locale.mdx
---
title: useSetLocale
description: アクティブなロケールを変更します。useSetLocale の API リファレンス。

---

`useSetLocale` フックは、アクティブなロケールを変更する関数を返します。クライアントサイド専用です。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

## 概要 [#overview]

`useSetLocale` を呼び出してセッターを取得し、その後ロケールコードを指定して呼び出します。

*例では `gt-react` からインポートしています。代わりに、ご利用のフレームワークのパッケージからインポートしてください。*

```tsx
import { useSetLocale } from 'gt-react';

export default function LocaleButton() {
  const setLocale = useSetLocale();
  return <button onClick={() => setLocale('en')}>Set locale</button>;
}
```

*注: `useSetLocale` はクライアントサイド専用です。*

## 仕組み [#how-it-works]

返される関数を呼び出すと、使用中のフレームワークを通じてロケールが永続化・適用されます。

* React では cookie に保存され、デフォルトでページが再読み込みされます。
* Next.js App Router では cookie に保存され、server component tree が更新されます。Pages Router では、デフォルトの再読み込みを Next.js ナビゲーションに置き換えることができます。
* TanStack Start では cookie に保存され、ページが再読み込みされます。または、[`localeRouting`](/docs/react/reference/config#locale-routing) が有効な場合は、対応する pathname に移動します。
* React Native では native storage に保存され、provider の状態が更新され、翻訳が読み込まれて再レンダリングされます。

## 戻り値 [#returns]

**型** `(locale: string) => void`

指定されたコードをアクティブなロケールとして設定する関数です。

## メモ [#notes]

* `useSetLocale` はクライアントサイド専用です。
* アクティブなロケールを確認するには、[`useLocale`](/docs/react/reference/hooks/use-locale) を使用します。すぐに使える切り替え UI には、[`<LocaleSelector>`](/docs/react/reference/components/locale-selector) を使用します。