私はReactを学んでいて、useメソッドでアクセスできるカスタムコンテキストを持っています:

// In a Provider file.
export const useUsefulObject(): UsefulObject {
  return useContext(...)
}

別のファイルのクリックコールバックでUsefulObjectを使用したい。便宜上、そのコールバックをメソッドでラップしていますsomeLogic

const PageComponent: React.FC = () => {
  return <Button onClick={(e) => someLogic(e)} />;
}

function someLogic(e: Event) { 
  const usefulObject = useUsefulObject();
  usefulObject.foo(e, ...); 
}

ただし、VS Codeは、someLogicでuseUsefulObjectを呼び出すと、コンポーネントメソッドの外部で呼び出されるため、フックのルールに違反することを警告します。

オブジェクトを渡すことはできますが(以下のコードは機能します!)、すべての受け渡しを回避するために、コンテキストのポイントを無効にしているように感じます。これより良い方法はありますか?

const PageComponent: React.FC = () => {
  const usefulObject = useUsefulObject();
  return <Button onClick={(e) => someLogic(e, usefulObject)} />;
}

function someLogic(e: Event, usefulObject) { 
  usefulObject.foo(e, ...); 
}
応答

コンポーネントのレンダリング中にフックを呼び出す必要があるため、最後のアイデアはそれを行うための可能な方法の1つです。もう1つのオプションは、コンテキストにアクセスしてsomeLogic関数を作成するカスタムフックを作成できることです。

const PageComponent: React.FC = () => {
  const someLogic = useSomeLogic();
  return <Button onClick={(e) => someLogic(e)} />
}

function useSomeLogic() {
  const usefulObject = useUsefulObject();
  const someLogic = useCallback((e: Event) => {
    usefulObject.foo(e, ...);
  }, [usefulObject]);
  return someLogic;
}