Nikolay Matyushkin

1) useLayoutEffect - можно пробнуть его, но архитекторы реакта настоятельно рекомендуют использовать useEffect

2) если же мы слушаем архитекторов реакта, значит мы создаём переменную в стейте компонента:

const [isLoading, setLoading] = useState(false);

Перед возвратом jsx разметки, ставим условие, если isLoading === false, то return. А в useEffect, после диспатча сэтим в isLoading значение true.

useEffect(() => {
dispatch(fetchVacations());
if (!isLoading) setLoading(true);   // Сэтим истину только в случае если isLoading === false 
}, [])                              // во избежании мультирендеринга

if (!isLoading) return;

return (...)}

таким образом, компонент не рендерится, пока мы не задиспатчим данные в стор

Ознакомьтесь с тем, как нужно правильно коннектиться со стором тутачки

Обратите внимание на mapDispatchToProps.

Ваша логика здесь такая:

Производя ввод каких-то символов, вызывается функция filterUsers, которая в свою очередь диспатчит вводимое значение в store, заменяя каждый раз параметр search. Каждый раз, когда вызывается dispatch происходит перерендер того состояния, который меняется в зависимости от диспатча. В вашем примере, вы обновляете состояние параметра search, когда параметр users сохраняет своё состояние с того момента, когда вы последний раз диспатчили его (т.е. вызывали функцию loadUsers), потому, что функция filterUsers ссылается на кейс USERTABLE_FILTER_USERS, а к кейсу, который меняет непосредственно состояние параметра users (USERSTABLE_LOAD_USERS) он не обращается.

Попробуйте так. Решение конечно не идеально, но Вы должны увидить разницу. Замените свой кейс USERTABLE_FILTER_USERS, на тот, что внизу.

case USERTABLE_FILTER_USERS:
                return {
                    ...state,
                    search: action.payload,
                    users: filteredUsers(state.users)
                }

import React, {Fragment} from "react"
import { connect } from "react-redux"
import UsersTable from "./UsersTable";
import { loadUsers } from "../../store/UsersTable/actions";


class UsersTableContainer extends React.Component {

    async componentDidMount() {
        const response = await fetch("http://www.filltext.com/?rows=500&id={index}&name={firstName}&surname={lastName}&city={city}&fullname={firstName}~{lastName}&lastloginfromip={ip}")
        const data = await response.json()
        this.props.loadUsers(data)
    }

    render() {
        const { users, loadUsers } = this.props
        return (
             <Fragment>
                   {!isLoading ? (
                        <React.Fragment>
                            <UsersTable
                                users={users}
                                loadUsers={loadUsers}
                            />
                        </React.Fragment>
                   ) : (
                      <Preloader>
                   )}
             </Fragment>
        )
    }
}

const setStateToProps = state => {
    return {
        users: state.userstable.users,
        isLoading: state.userstable.isLoading
    }
}

const setDispatchToProps = {
    loadUsers
}

export default connect(setStateToProps, setDispatchToProps)(UsersTableContainer)

Попробуйте так. Вместо компоненты < Preloader > подсуньте свою "крутилку".