React.JS React 查询设计模式

问：

我正在使用 Rick and Morty API 和 react 查询并在 Home 组件中显示数据

Home 组件有 3 个子组件，用于显示数据的 Card、搜索功能和分页功能

我的问题是：我可以将与子组件相关的逻辑（状态、函数和变量）移动到另一个文件中吗？这样做是好的做法吗？我是 React 的新手，并试图理解设计模式。欢迎对文件夹结构提出任何建议...

我开发了以下代码，但我想更加模块化和更简洁......

import React, { useState } from 'react';
import { useCharacters } from './service/api';
import Cardi from './styles/blocks/Cardi';
import Pagination from './styles/blocks/Pagination';
import SearchInput from './styles/blocks/Search';

const Home = () => {
  const { data, isLoading, isError } = useCharacters(); //API Data
  const [currentPage, setCurrentPage] = useState(1); // State da página atual
  const [searchQuery, setSearchQuery] = useState(''); // State da barra de pesquisa
  const itemsPerPage = 9

  console.log('home' + data)

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error fetching data</div>;
  }

  //Set o state da barra de busca e set a página inicial para 1 para mostrar os resultados na primeira página
  const handleSearch = (event) => {
    setSearchQuery(event.target.value);
    setCurrentPage(1); // Reset to the first page when searching
  };

  // Filter the data based on the search query
  const filteredData = data.filter((item) =>
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  // Calculate the range of items to display based on the current page
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentItems = filteredData.slice(startIndex, endIndex);
  const totalPages = Math.ceil(filteredData.length / itemsPerPage);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <SearchInput value={searchQuery} onChange={handleSearch} />
      <Cardi.Grid>
        {currentItems.map((item) => (
             <Cardi key={item.id}>
               <Cardi.Image src={item.image}/> 
               <Cardi.Title>{item.name}</Cardi.Title>
               <Cardi.Specs>{item.species}</Cardi.Specs>
               <Cardi.Specs>{item.status}</Cardi.Specs>
               <Cardi.Button to={`/details/${item.id}`}></Cardi.Button>
             </Cardi>
        ))}
      </Cardi.Grid>
      <Pagination
        totalPages={totalPages}
        currentPage={currentPage}
        onPageChange={handlePageChange}
      />
    </div>
  );
};

export default Home;