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時間ぐらい悩みましたが…
Top comments (1)
Note: I read the translated version.
Yes, hooks don't share states in different components. That used to get me too.