【React練習問題】（回答）②カスタムhooksをつかって表示制御をしよう

課題の目的

カスタムhooksの基礎的な使い方を理解してもらいたかった。

回答

実装方法はそれぞれ違うと思うので、一つの例だと思って見てほしいです。

import React, { useState, useCallback, memo} from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const [isOpen, open, close] = useOpenComment();
  const [isOpen2, open2, close2] = useOpenComment();
  return (
    <div>
      <button onClick={open}>open!!</button>
      <button onClick={open2}>open2!!</button>
      <Comment isOpen={isOpen} close={close} comment="openしました！"/>
      <Comment isOpen={isOpen2} close={close2} comment="openしました！2"/>
    </div>
  );
};

const useOpenComment = () => {
  const [isOpen, setIsOpen] = useState(false);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);
  return [isOpen, open, close];
};

const Comment = memo(({isOpen, close, comment}) => (
  <>
  {isOpen ?  
    <div className="comment">
      <p>{comment}</p>
      <button onClick={close}>close</button>
    </div>
    : null
  }
  </>
));

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

仕様の実装

・useStateを１回だけ使う
・useCallbackを２回だけ使う
これをカスタムhooksをつかって解決している。

const useOpenComment = () => {
  const [isOpen, setIsOpen] = useState(false);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);
  return [isOpen, open, close];
};

これをつくっておくことで、ボタンで利用する関数を毎回定義しなくても、useOpenCommentを呼び出すだけで必要な関数を呼び出すことだできるようになる。