ReactComponentの外側からReactHooksのContextを使用したい

Question

ReactComponentの外側からReactHooksのContextを使用したい

ReactHooksで実装している途中で、やり方が分からずつまずいてしまったので助けていただきたいです。

• PageA,PageBでDBから取得したユーザーの情報を表示したい
• DBの取得ロジックはPageA,Bで全く同じ
• AB両方に重複したロジックを持ちたくないので、その部分をReactコンポーネントから切り離して管理したい。

実現したいのは上記の動きです。イメージを作りました。
UIのレンダリングを伴わない、UserDataController.jsでContextの値を得たり更新する方法は無いでしょうか？

サンプルコード

PageA.js & PageB.js

import React from 'react'
import {Context} from './Provider'
import {UserDataController} from './UserDataController'

export const PageA = () => {
  const [context, setContext] = React.useContext(Context)

  React.useEffect(() => {
    const user = new UserDataController()
    user.getUser()
  }, [])

  return (
    <h1>{context.username}</h1>
  )
}

UserDataController.js
（クラスで定義してますが、共通化が実現できるのであれば型は問いません）

import React from 'react'

export class UserDataController {
  getUser(uid) {
    // データベースから情報を取得する処理
    // 取得した内容をもとにContextの値を変更したい（このやり方がわからない）
  }
}

Answer 1

こうした共通処理を纏めたい場合はカスタムフックでできます。

＜参考＞
https://ja.reactjs.org/docs/hooks-custom.html

• App.js（親コンポーネント）

export const UserContext = createContext();

function App() {
  const user = useUser();

  return (
    <UserContext.Provider value={user}>
      <PageA />
      <PageB />
    </UserContext.Provider>
  );
}

• useUser.js（カスタムフック）

const useUser = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // fetch()
    setUser({
      name: "Taro",
    });
  }, []);

  return user;
};

• PageA.js

const PageA = () => {
  const user = useContext(UserContext);

  return <div>PageA {user?.name}</div>;
};

• PageB.js

const PageA = () => {
  const user = useContext(UserContext);

  return <div>PageB {user?.name}</div>;
};

Comments

[nbys]

ありがとうございます！
提示いただいた例とドキュメントに従って実装してみたところ、やりたいことが実現できました。