import React from "react"; import { useCallback, useState, useMemo } from "react"; export default function App() { // return ( //

Hello CodeSandbox

Start editing to see some magic happen!

// ); const [items, setItems] = useState([1, 2, 3, 4, 5, 6]); const { sortedItems, toggleSort } = useSort(items); const { filteredItems } = usePagination(sortedItems); return (

This is sample

{val}

); } //並び替えするカスタムフック const useSort = (items) => { const [isDesc, setIsDesc] = useState(false); const sortedItems = useMemo(() => { //悪い例 const badExampleItems = isDesc ? items.sort(_sortDesc) : items.sort(_sortAsc); //良い例 const goodExampleItems = isDesc ? [...items].sort(_sortDesc) : [...items].sort(_sortAsc); return goodExampleItems; }, [items, isDesc]); // DESC/ASCの切り替え const toggleSort = useCallback(() => { setIsDesc((prevState) => { return !prevState; }); }, [setIsDesc]); return { sortedItems, toggleSort }; }; function _sortAsc(a, b) { if (a < b) { return -1; } if (a > b) { return 1; } return 0; } function _sortDesc(a, b) { if (a < b) { return 1; } if (a > b) { return -1; } return 0; } //フィルタするカスタムフック const usePagination = (items) => { const [limit, setLimit] = useState(3); const [currentPage, setCurrentPage] = useState(1); const filteredItems = useMemo(() => { //悪い例 const badFilteredItems = items.slice(0, limit); //良い例 const goodFilteredItems = [...items].slice(0, limit); return goodFilteredItems; }, [items, limit]); const paginationElement = useMemo(() => { // console.log(items, currentPage, limit); let li_list; // ページネーションのLiタグリストを生成する処理 // ... return

{li_list}; }, [items, currentPage, limit]); return { filteredItems, paginationElement, setCurrentPage, setLimit }; };

cranky-snow-ere3o