\n}\n\nReactDOM.render(, document.getElementById('root'))\n```\n\n#### Request Format\n\n\n\nAs shown in the figure, the request process can be regarded as a black box, and the request parameters are [IListQueryData](#IListQueryData), user can influence the process in the following three ways：\n\n* formatBefore: Modify the data before the request\n* formatAfter: Modify the data returned by the request\n* query: Directly proxy the entire request process\n\nJust make sure that the final result is [IListResponse](#IListResponse). AList will do the rest for you。\n\n#### Customize Request\n\nBy Passing the `query` props and you can completely customize the way of request\n\n```jsx\nimport React, { useState, useEffect, useRef } from 'react'\nimport {\n ListProvider, TableProvider, PaginationProvider, MultipleProvider,\n createListActions,\n ListLifeCycleTypes,\n ListEffectHooks,\n createListEffectHook\n} from '@alist/react'\n\nconst Input = (props) => {\n const [value, setValue] = useState(props.value)\n useEffect(() => {\n if (props.value !== value) {\n setValue(props.value)\n }\n }, [props.value])\n\n return {\n setValue(e.target.value)\n props.onChange(e.target.value)\n }} />\n}\n\nconst Pagination = () => {\n const [currentPage, setCurrentPage] = useState(1)\n return \n {(props) =>