React: в каком компоненте (родителе или дочернем) получать работать с сервером

Такой концептуальный вопрос:

есть страница (OverviewPanel), содержащая таблицу с записями (RecordsTable) и панель управления записями (RecordsToolbar)

данные с сервера запрашиваются из OverviewPanel, предобрабатываются и передаются в RecordsTable в виде массива + в виде некоторых флагов в RecordsToolbar

в таблице RecordsTable пользователь может выбрать некоторые действия с отдельными записями (удалить, редактировать и т.д.)

что надо делать с записями затем отправляется на сервер (id записей, дополнительные данные и т.п.)

Такой вопрос:

А где эти данные должны передаваться серверу? Что про это говорит современная наука?

В голове есть 3 варианта:

1. общие данные (например, пользователь выбрал все записи в таблице или через панель управления) обрабатываются в OverviewPanel, т.е. там будет стоять колбэк и вызов функций отправки данных на сервер

условно

import { deleteRecords } from './api'
...
const handleDeleteAllRecords = () => {
    deleteRecords([]);
}

индивидуальные данные (например, пользователь выбрал удаление заданной записи в таблице) обрабатывается на месте, т.е. в RecordsTable и там же происходит вызов соответствующей функции:

условно

import { deleteRecords } from '../api'
...
const handleDeleteRecord = (id: number) => {
    deleteRecords([id]);
}

2. вся работа с сервером происходит в родителе - OverviewPanel, а дочерний компонент RecordsTable` сам ничего не делает, а только колбэками передаёт данные выше (если цепочка длиннее родитель-потомок, то такое прокидывание колбэка происходит через несколько компонентов)

условно

import { deleteRecords } from './api'
...
const handleDeleteAllRecords = () => {
    deleteRecords([]);
}

const handleDeleteRecord = (id: number) => {
    deleteRecords([id]);
}

...

// отрисовка компонента
return (
    <>
        <RecordsToolbar />
        <RecordsTable onDelete={handleDeleteRecord} />
    </>
);

с одной стороны вся работа с сервером происходит в одном месте и это УДОБНО и НАГЛЯДНО с другой стороны - появляются дополнительные колбэки, а если цепочки длинные - то промежуточный компонент всего лишь транслирует через себя колбэк

<RecordsMiddle onDelete={props.onDelete} />

3. Использовать redux, mobx или другие системы контроля состояний

в этом случае ни клиент ни сервер ничего сами не делают, а работают с хранилищами (store), закинули скажем массив id в хранилище и уже само хранилище занимается отправкой и получением данных, а компоненты просто всё берут из хранилища

это, как по мне, надо очень аккуратно использовать и только для каких-то глобальных данных, для частных (нужны только 1 компоненту в 1 месте) - слишком расточительно

ну и конечно очень ненаглядно когда смотришь в код

поэтому больше нравится 1) или 2) способы

но какой лучше?!!!

Подскажите пожалуйста