カスタムフックから取得したstateの値が変わらない

Question

前提・実現したいこと

2つのinputと1秒毎に増えていく数値を表示するカウンターなどがあります。
下記はデモです。
demo
1つ目のinputにhogeを入力すると、2つ目のinputが入力できるようになります。
2つ目のinputにfugaを入力すると、カウンターの下のボタンが押せるようになります。
また、2つのinputの入力値をカウンターの上に表示します。

---

以下の問題を解決したいです。

• 上記デモではinputにテキストを入力しても、カウンター上に入力値が表示されないです。
• また、2つ目のinputにfugaを入力しても、カウンター下のボタンが押せるようにならないです。

該当のソースコード

カスタムフックuseCount.js

export const useCount = () => {
  const [text1, setText1] = useState("");
  const input1 = ({ target: { value } }) => setText1(value);
  const [text2, setText2] = useState("");
  const input2 = ({ target: { value } }) => setText2(value);

  const [count, setCount] = useState(0);
  useEffect(() => {
    const countUp = () => setCount((count) => count + 1);
    const timerID = setInterval(countUp, 1000);
    return () => clearInterval(timerID);
  }, []);

  return { input1, text1, input2, text2, count };
};

試したこと

カウンター周りのコンポーネントを切り分けずに、input群と同じコンポーネントに含めると機能しました。
下記はそのデモです。
demo2

しかし、カウンター周りのコンポーネントはコード量が多くなるので、カウンター周りのコンポーネントは切り分けたいです。

Comments

[hoshi-takanori]

demo と demo2 のリンク先が同じですね。
できればソースは (カスタムフックだけでも) 質問文中に貼って欲しいです。

[erajera]

ご確認いただきありがとうございます。ただいまデモの修正と、カスタムフックのコードを追記しました。

Answer 1

App.jsとCounter.jsの両方からuseCounterを呼び出していますが、呼び出しごとにstateが作成されることとなります。両者で取れるstateの値は、連動しません。