Как повторно отрендерить только одну ячейку?

Я использую таблицу реакций v7, и у меня возникает проблема, когда при изменении данных одной ячейки вся таблица перерисовывается. У меня тысячи строк, поэтому каждый раз повторный рендеринг выполняется довольно медленно.

Моя таблица ответов вызывает форму, которую пользователь может заполнить, чтобы удалить элемент из определенной строки: форма вызывает API, который изменяет данные в бэкэнде.

Я хочу иметь возможность просто повторно отобразить ячейку, содержащую связанные местоположения для статьи, которую я редактирую, чтобы отразить, что я удалил местоположение из этой ячейки.

Articles    Associated Locations
Article 1   **Paris, Brazil**
Article 2   Idaho, Illinois

станет:

Articles    Associated Locations
Article 1   **Paris**
Article 2   Idaho, Illinois

так что я бы повторно визуализировал только верхнюю правую ячейку.

Упрощенный код:

App.js:

function App() {

  const columns = useMemo(
    () => [
      {
        columns: [
          {
            Header: "Article",
            accessor: "headline",
            Cell: row => (
              <div>
                {row.original.headline}
              </div>
            )
          },
          
          {
            Header: "Locations",
            id: "locations",
            Cell: ({ row }) => (
              <div>
                {row.original.tags}
              </div>
            )
          },
        ]
      }
    
    ],

    []
  );

  const [data, setData] = useState([]);

  
  useEffect(() => {
    (async () => {
      const result = await axios("/articles"); // fetch data from an API
      setData(result.data);
    })();
  }, []);

  return (
    <div className="App">
      <Table columns={columns} data={data} />
    </div>
  );
}
export default App;

App.js вызывает Table.js:

Table.js:

export default function Table({ columns, data }) {
 
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,

  } = useTable(
    {
      columns,
      data,
    },
  );
  
  const renderRowSubComponent = React.useCallback(({ row }) => {
    return (
      <>
      <DeleteForm id={row.original.article_id} row={row} ></DeleteForm>
      </>
    );
    }
  );

  // Render the UI for your table
  return (
    <>
      <div>
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                    className={
                      column.isSorted
                        ? column.isSortedDesc
                          ? "sort-desc"
                          : "sort-asc"
                        : ""
                    }
                  >
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {page.map((row, i) => {
              prepareRow(row);
          etc.

А в Table.js есть DeleteForm, которую я использую для вызова API, удаляющего выбранное место из статьи:

DeleteForm.js:

class DeleteForm extends Component {
  constructor(props){
    super(props);

    this.state = {
      article_id: 0,
      inputLoc: null,
      locations: [],
    };
  }
  
  onChange = e => {
    this.setState({inputLoc: e.target.value}, () => {
      console.log(this.state.inputLoc, 'inputLoc')
    })};

  deleteLocAssociation = () => {
    fetch...
    // API call that deletes the location in the backend
    this.setState({locations: APIResults})
  }

  componentDidMount(){
    if(this.state.inputLoc){
      this.deleteLocAssociation();
    }
  }

  render() {
    const row = this.props.row

    return (
      <Form onSubmit={this.deleteLocAssociation}>
        // Form for user to input a location
      </Form>
      

    )


  }
}

export default DeleteForm

Я изучал переполнение стека, и самые близкие вопросы, которые я мог найти, были:

• response-table повторно отображает всю таблицу при выборе: Нет полезно, так как я не хочу понижать свою таблицу реакций до v6
• выберите строку в таблице реакции щелчка: обнаружил это о выборе конкретной строки в response-table, но не уверен, как я могу применить это для повторного рендеринга выбранной строки
• response-table продолжает повторно отображать неизмененные ячейки: без ответа

В некоторых местах говорят, что виртуализация или разбиение на страницы могут помочь, но я действительно хочу сначала отобразить все в своей таблице, поскольку у меня есть функция поиска для поиска данных, и я хочу, чтобы все данные были доступны.