custom hooksをグローバル変数みたいに扱わないで

english: https://dev.to/origamium/don-t-use-custom-hooks-like-global-state-dda

はい、まずこのコードを見てください。

const useInvalidHooks = () => {
  const [state, setState] = useState(false);
  const handler = useCallback(() => {
    setState(true);
  }, []);

  return [state, handler];
};

export default function ParentComponent() {
  const [state] = useInvalidHooks();
  console.log(`parent: ${state}`);
  return (
    <div>
      <InnerComponent />
    </div>
  );
}

function InnerComponent() {
  const [state, handler] = useInvalidHooks();
  console.log(`children: ${state}`);
  return <button onClick={handler}>hai</button>;
}

このとき、InnerComponetのbuttonを押下したさい、その親であるParentComponentでstateの変更と更新を期待していると、ものの見事に打ちのめされます。変更されません。
経験豊かなReactエンジニアにはその理由はすぐわかると思います。

はい、理由は生成されたhooksは他のhooksの状態とは完全に別ですからです。私はこれに2時間ぐらい悩みましたが…

Comments

[Sung M. Kim]

Note: I read the translated version.

Yes, hooks don't share states in different components. That used to get me too.