On each page load, you are fetching all data that is possible. If we increase the number of categories, there will be a lot of unnecessary calls. We can avoid this by separating logic.
You can split it into a couple of tasks:
[x] Create a NewsService that is responsible for communication with an API
[x] Create a custom hook useCategory that accepts the category name as an argument and returns an object with data, isLoading, and error.
[x] Create a Category(or with a different name) component that accepts category name through props.
[x] Use data, isLoading, and error properties to show the correct component state. For the loading screen create a skeleton.
markanns
commented
6 months ago
On each page load, you are fetching all data that is possible. If we increase the number of categories, there will be a lot of unnecessary calls. We can avoid this by separating logic.
You can split it into a couple of tasks: