ReactJS Hook Pattern ~Custom Hook Composition~

・This pattern combines multiple custom hooks to create more powerful, reusable functionality. It helps to organise complex logic by breaking it down into smaller, more focused hooks that can be combined as required.

import { useState, useMemo } from "react";

const FRUITS= [
  "apple",
  "banana",
  "orange",
  "peach",
  "lemon",
  "melon",
  "grape",
];

function useInput() {
  const [query, setQuery] = useState("");
  return { query, setQuery };
}

function useFilter(fruits, query) {
  const filterdFruits = useMemo(
    () =>
      fruits.filter((fruit) => fruit.toLowerCase().includes(query.toLowerCase())),
    [fruit, query],
  );
  return filteredFruits;
}

function useSearch() {
  const { query, setQuery } = useInput();
  const filterdItems = useFilter(FRUITS, query);
  return { query, setQuery, filteredFruits};
}

function App() {
  const { query, setQuery, filterdItems } = useSearch();

  return (
    <div>

      <input
        type="text"
        placeholder="Input fruits..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />

      <ul>
        {filteredFruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;