React + TypeScript + Vite

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

1. 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

Expanding the ESLint configuration

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 to plugin:@typescript-eslint/recommended-type-checked or plugin:@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 the extends list