Alex Karo

1) Разберитесь сначала с самим TS.
2) Посмотрите курсы. Минин, например, норм делает.
3) Книжку можно почитать. И статейки в блоге автора.
4) create-react-app + ts поможет стартовать
5) Доку всегда полезно почитать
6) Ну и гугл, как всегда, в помощь

1) В useEffect добавляем event listener на scroll у window
2) Читаем в обработчике window.scrollY, записываем куда хотим
3) Не забываем удалить листенер при анмаунте компонента (return в useEffect)

Мой взгляд, на истину не претендую:

Я сторонник того, что на клиенте вообще не стоит хранить большие объемы данных. Т.е. запрашивает только те, которые нам нужны для работы/отображения в конкретный момент. Все фильтры/сортировка/пагинация на стороне сервера. Понятно, что это не всегда возможно, поэтому идем дальше...

В хранении большого объема данных в редаксе не вижу ничего плохого, если они редко меняются. Если часто - неприятно, нужно поддерживать иммутабельность, затраты на garbage collector.
Плюсы - быстрый доступ до данных, т.к. хранятся они в памяти.
Минусы - поддержка иммутабельности и затраты на память.

Если уж отходить от редакса - можно воспользоваться каким-то стором на основе мутабельных объектов, например mobx.

Если всё это держать в памяти не хочется - то действительно можно взять IndexedDB. Хранится на диске, между перезагрузками сохраняется, асинхронное апи, есть индексы по полям. Нужно учесть, что на браузерах в режиме инкогнито может не работать или работать ограниченно (для предотвращения отслеживания).

Ну и, конечно, вопрос в объеме данных. Просто 2к объектов - не то, чтобы сильно много. Вопрос, насколько тяжелых объектов.

Кладем картинку в папку public и пути до картинки прописываем %PUBLIC_URL%/name-of-your-image.png