Custom Hooksとは?

reactを使用して構成部品を作成すると、Login Formのように頻繁に繰り返される論理が発生する可能性があります.この場合,Custom Hooksを用いて重複する論理をHooksに組み合わせることで,コードを効率的に管理することができる.参考までに、Custom Hooksの名前は通常prefixを使用します.

使用例

使用前

App.js

const { useState, useCallback } = require("react");

function App() {
  const [user, setUser] = useState({
    email: "",
    password: ""
  });

  const handler = useCallback(
    (e) => {
      const { name, value } = e.target;
      setUser((user) => ({ ...user, [name]: value }));
    },
    [user]
  );

  return (
    <>
      <div>
        email:
        <input name="email" value={user.email} onChange={handler} />
      </div>
      <div>
        password:
        <input name="password" value={user.password} onChange={handler} />
      </div>
    </>
  );
}

export default App;

使用後

useInputs.js

import { useCallback, useState } from "react";

const useInputs = (initialValue = null) => {
  const [data, setData] = useState(initialValue);

  const handler = useCallback(
    (e) => {
      const { name, value } = e.target;
      setData((data) => ({ ...data, [name]: value }));
    },
    [data]
  );

  return [data, handler];
};

export default useInputs;

App.js

import useInputs from "./useInput";

function App() {
  const [user, handler] = useInputs({
    email: "",
    password: ""
  });

  return (
    <>
      <div>
        email:
        <input name="email" value={user.email} onChange={handler} />
      </div>
      <div>
        password:
        <input name="password" value={user.password} onChange={handler} />
      </div>
    </>
  );
}

export default App;