A demo of infinite scroll
A bug.
While implementing infinite scrolling functionality in a React application using the useInView and useInfiniteQuery hooks, we encountered a bug where the fetchTodo function was not triggered when the last items were in view before scrolling. This issue led to an incomplete loading of additional items, requiring users to scroll back up and down for the fetch operation to execute successfully.
fixes which are definetly not effective
-
Load a page with a grid of items, where the last row of items is partially visible at the bottom of the viewport. reducing grid columns..., increasing itemsperpage.
Feel free to help fix make a PR
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list