Reactのカスタムフックスを活用して責務を分離する

はじめに

Reactでコードを書いていると、ビジネスロジックが増加していきます。具体的には、ボタンを押下時の処理やstateの管理、API通信など。。。最初はこれでも可読性高く見えるのですが、量が増えてくると全体像がわかりづらくなり管理がしにくくなっていきます。そんな時にカスタムフックスを使う事で綺麗に見せられるので、紹介します。

可読性の低いコード

App.tsx

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);
  const [count4, setCount4] = useState(0);
  const [count5, setCount5] = useState(0);
  const [count6, setCount6] = useState(0);
  const [count7, setCount7] = useState(0);
  const [count8, setCount8] = useState(0);
  const [count9, setCount9] = useState(0);
  const [count10, setCount10] = useState(0);


  const onClickBtn1 = () => {
    setCount(count + 1);
  }
  const onClickBtn2 = () => {
    setCount2(count2 + 1);
  }
  const onClickBtn3 = () => {
    setCount3(count3 + 1);
  }
  const onClickBtn4 = () => {
    setCount4(count4 + 1);
  }
  const onClickBtn5 = () => {
    setCount5(count5 + 1);
  }
  const onClickBtn6 = () => {
    setCount6(count6 + 1);
  }
  const onClickBtn7 = () => {
    setCount7(count7 + 1);
  }
  const onClickBtn8 = () => {
    setCount8(count8 + 1);
  }
  const onClickBtn9 = () => {
    setCount9(count9 + 1);
  }
  const onClickBtn10 = () => {
    setCount10(count10 + 1);
  }
  
  return (
    <div>
      <button onClick={onClickBtn1}>ボタン1</button>
      <button onClick={onClickBtn2}>ボタン2</button>
      <button onClick={onClickBtn3}>ボタン3</button>
      <button onClick={onClickBtn4}>ボタン4</button>
      <button onClick={onClickBtn5}>ボタン5</button>
      <button onClick={onClickBtn6}>ボタン6</button>
      <button onClick={onClickBtn7}>ボタン7</button>
      <button onClick={onClickBtn8}>ボタン8</button>
      <button onClick={onClickBtn9}>ボタン9</button>
      <button onClick={onClickBtn10}>ボタン10</button>
    </div>
  );
}

export default App;

→stateやonClickイベントが大量にあり、本来読みたいViewのコンポーネントまで辿り着きにくい。また、中間処理的に実装を含めている場合はそれが更にコードを読みにくくしたりします。

改善後のコード

import React, { useState } from 'react';

function App() {
  const {
    onClickBtn1,
    onClickBtn2,
    onClickBtn3,
    onClickBtn4,
    onClickBtn5,
    onClickBtn6,
    onClickBtn7,
    onClickBtn8,
    onClickBtn9,
    onClickBtn10,
  } = useCounter();

  return (
    <div>
      <button onClick={onClickBtn1}>ボタン1</button>
      <button onClick={onClickBtn2}>ボタン2</button>
      <button onClick={onClickBtn3}>ボタン3</button>
      <button onClick={onClickBtn4}>ボタン4</button>
      <button onClick={onClickBtn5}>ボタン5</button>
      <button onClick={onClickBtn6}>ボタン6</button>
      <button onClick={onClickBtn7}>ボタン7</button>
      <button onClick={onClickBtn8}>ボタン8</button>
      <button onClick={onClickBtn9}>ボタン9</button>
      <button onClick={onClickBtn10}>ボタン10</button>
    </div>
  );
}

export default App;


const useCounter = () => {  
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);
  const [count4, setCount4] = useState(0);
  const [count5, setCount5] = useState(0);
  const [count6, setCount6] = useState(0);
  const [count7, setCount7] = useState(0);
  const [count8, setCount8] = useState(0);
  const [count9, setCount9] = useState(0);
  const [count10, setCount10] = useState(0);


  const onClickBtn1 = () => {
    setCount(count + 1);
  }
  const onClickBtn2 = () => {
    setCount2(count2 + 1);
  }
  const onClickBtn3 = () => {
    setCount3(count3 + 1);
  }
  const onClickBtn4 = () => {
    setCount4(count4 + 1);
  }
  const onClickBtn5 = () => {
    setCount5(count5 + 1);
  }
  const onClickBtn6 = () => {
    setCount6(count6 + 1);
  }
  const onClickBtn7 = () => {
    setCount7(count7 + 1);
  }
  const onClickBtn8 = () => {
    setCount8(count8 + 1);
  }
  const onClickBtn9 = () => {
    setCount9(count9 + 1);
  }
  const onClickBtn10 = () => {
    setCount10(count10 + 1);
  }

  return {
    count,
    count2,
    count3,
    count4,
    count5,
    count6,
    count7,
    count8,
    count9,
    count10,
    onClickBtn1,
    onClickBtn2,
    onClickBtn3,
    onClickBtn4,
    onClickBtn5,
    onClickBtn6,
    onClickBtn7,
    onClickBtn8,
    onClickBtn9,
    onClickBtn10,
  }
}

→これだけです。カスタムフックスを利用し、ビジネスロジックの箇所を外に出しました。これだけでコードの見通しをグンとあげる事ができました。ちょっとの工夫で改善できるので、やっていない方がいたら試してみてください。

▪️メリット
・コードの可読性が上がる
・ビジネスロジックのテストがしやすくなる