react-list | : scroll : A versatile infinite scroll React component | Frontend Framework library

I have a React app where i use axios to get a list of 200 Todos from a free online REST API with fake data (https://jsonplaceholder.typicode.com/todos). My app has one input that you can search/filter for titles of todos and a select/filter that you can choose true or false for the completed todos. My problem is that i have implement a custom pagination that works well only with the default list of todos, so without filtering the list. For example, if you type in input search the word "vero" you must click in page "2" so you can see existing todo card. Same with select, if you select "true" you can see only 3 cards in the 1st page, but if you click in 2nd page you can see more etc. I have tried a lot but i can't make it work as i want. How can i implement pagination with filter?

App.js

The entire list gets re-rendered instead of the particular selected list item upon state change

https://codesandbox.io/s/lfgxe (Refer the console to see components that gets rendered)

When the "add to the main array" button is clicked, the array(state) has to get updated and only the particular list item has to be re-rendered. But all the items in the list are re-rendered. I tried passing key prop, memo, callbacks they but didn't work.

Links that I referred to:

1. https://alexsidorenko.com/blog/react-list-rerender/

2. https://dmitripavlutin.com/dont-overuse-react-usecallback/

App.js:

I have little experience in Javascript and React, I need to disable the action buttons in modal while the form is submitting, I've searched the internet and haven't found a solution.

Below is the structure of the project:

Countries list:

I have a list of items on my application and I am trying to create a details page to each one on click. Moreover I am not managing how to do it with useState and useEffect with typescript, I could manage just using componentDidMount and is not my goal here.

On my state, called MetricState, I have "metrics" and I have seen in some places that I should add a "selectedMetric" to my state too. I think this is a weird solution since I just want to be able to call a dispatch with the action of "select metric with id x on the metrics list that is on state".

Here is the codesandbox, when you click on the "details" button you will see that is not printing the name of the selected metric coming from the state: https://codesandbox.io/s/react-listing-forked-6sd99

This is my State:

I am trying to develop a React application that shows a list of itens using Hooks but an infinite loop is happening. I think the state is not being identified as updated but I cannot tell why.
I have seen at the documentation that it could be the dependencies that I should add on the useEffect function, but when I remove the dependencies on useEffect it solves the problem. Moreover this is not what the documentation recommends to do, they recommend to put all dependencies on the list.

The codesandbox is here: https://codesandbox.io/s/react-listing-forked-6sd99 and if you uncomment the line 30 at Dashboard.ts you will be able to see the infinite loop, this is the line that calls the dispatch function (and also codesandbox will freze for some seconds) . Thank you in advance!

The useSelector and UseEffect functions are as below, located at the Dashboard.tsx file: