Реакция глобальных обновлений состояния слишком поздно

Question

Я создал приложение реагирования с помощью приложения create-Reaction и использую пакет activn npm для управления глобальными состояниями. Это мой index.js:

import React, { Component }  from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import {setGlobal} from 'reactn';

setGlobal({
  selected: [],
  rows: []
});

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

В моем App.js у меня есть следующий основной компонент, который экспортируется:

export default function App() {
  const [view, setView] = useState(null);
  const [sName, setSName] = React.useState("");
  const [sDate, setSDate] = React.useState("");
  const [sType, setSType] = React.useState("");
  const [global, setGlobal] = useGlobal();

  function handleSelectionClick(){
    setView("selection")//more stuff will be implemented
  }
  const handleSearchClick = async (event) => {
    setView("search");
    setSName(document.getElementById("nameLabel").value);
    setSDate(document.getElementById("datePicker").value);
    if(document.getElementById("typePicker").value != "Please Select"){
      setSType(document.getElementById("typePicker").value);
    }
    await fetch("http://localhost:8080/data/jobs",{
      method: 'GET',
      headers: {
        'sname': sName,
        'sdate': sDate,
        'stype': sType
      }
    })
      .then(response => response.json())
      .then(responseJson =>{
        setGlobal(state =>({
          rows: responseJson.data
        }));
        alert(global.rows)
      })
  }
  function ShowView(view){
    if(view=="search"){
      return <SearchTable />
    }else if(view == "selection"){
      return <SelectionTable />
    }else{
      return(
        <div>
          <h1>initial state without any clicks</h1>
          <p>only for dev. later on the searchtable without any filters willo be dispalyed</p>
        </div>
      ) 
    }
  }

  return (
    <div /*className='container'/*{classes.root}*/>
      <h1>Job Monitor</h1>
      <h2>Search:</h2>
      <NameLabel />
      <DatePicker />
      <TypePicker />
      <div>
        <SearchButton btClick={handleSearchClick}/>
        <SelectionButton btClick={handleSelectionClick} />
      </div>
      <br/>
      <h2>Result:</h2>
      {ShowView(view)}
    </div>
  );
}

А это мой компонент SearchTable:

function SearchTable(){
  const classes = useStyles();
  const [order, setOrder] = useState('asc');
  const [orderBy, setOrderBy] = useState('calories');
  const [global, setGlobal] = useGlobal();
  const [page, setPage] = useState(0);
  const [dense, setDense] = useState(false);
  const [rowsPerPage, setRowsPerPage] = useState(300);

  const handleRequestSort = (event, property) => {
    const isDesc = orderBy === property && order === 'desc';
    setOrder(isDesc ? 'asc' : 'desc');
    setOrderBy(property);
  };

  const handleClick = (name) => {
    const selectedIndex = global.selected.indexOf(name);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(global.selected, name);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(global.selected.slice(1));
    } else if (selectedIndex === global.selected.length - 1) {
      newSelected = newSelected.concat(global.selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        global.selected.slice(0, selectedIndex),
        global.selected.slice(selectedIndex + 1),
      );
    }
  setGlobal(state => ({
    selected: newSelected
  }))};
  const isSelected = name => global.selected.indexOf(name) !== -1;   
  const emptyRows = rowsPerPage - Math.min(rowsPerPage, global.rows.length - page * rowsPerPage);

   return(
     <Paper className={classes.paper}>

       <div className={classes.tableWrapper}>
          <Table
            className={classes.table}
            aria-labelledby="tableTitle"
            size={dense ? 'small' : 'medium'}
          >
            <EnhancedTableHead
              classes={classes}
              numSelected={global.length}
              order={order}
              orderBy={orderBy}
              onRequestSort={handleRequestSort}
              rowCount={global.rows.length}
            />
            <TableBody>
              {stableSort(global.rows, getSorting(order, orderBy))
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((row, index) => {
                  const isItemSelected = isSelected(row.ID);
                  const labelId = `enhanced-table-checkbox-${index}`;

                  return (
                    <TableRow
                      hover
                      onClick={() => handleClick(row.ID)}
                      role="checkbox"
                      aria-checked={isItemSelected}
                      tabIndex={-1}
                      key={row.ID}
                      selected={isItemSelected}
                    >
                      <TableCell padding="checkbox">
                        <Checkbox
                          checked={isItemSelected}
                          inputProps={{ 'aria-labelledby': labelId }}
                        />
                      </TableCell>
                      <TableCell component="th" id={labelId} scope="row" padding="none">
                        {row.ID}
                      </TableCell>
                      <TableCell align="left">{row.NAME}</TableCell>
                      <TableCell align="left">{row.JOB_TYPE}</TableCell>
                      <TableCell align="left">{row.INSERTED}</TableCell>
                      <TableCell align="left">{row.VALID_FROM}</TableCell>
                      <TableCell align="left">{row.VALID_TO}</TableCell>
                    </TableRow>
                  );
                })}
              {emptyRows > 0 && (
                <TableRow style={{ height: 49 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      </Paper>
    )
}

Когда я нажимаю кнопку поиска в первый раз, SearchTable отображает правильно, и все параметры поиска используются по назначению. Но если таблица уже обработана, и я изменяю параметры поиска и снова нажимаю кнопку (второй щелчок), таблица перерисовывается, но использует те же значения, что и раньше. Если я сделаю то же самое снова (третий щелчок), то таблица будет отображаться с параметрами поиска после второго щелчка.

Похоже, что глобальное состояние global.rows обновляется слишком поздно ..