React Context.CuSumer не запускается при запуске fetch

Question

Мне нужно отобразить оверлей загрузки в моем приложении, когда выполняется какая-то асинхронная задача (выборка).Вместо создания загрузочных оверлеев в каждом компоненте, который выполняет асинхронную загрузку, я создал один общий оверлей внутри основного компонента «App».

Этот оверлей открывается, когда App.state.loadingOverlay = true

Для связи дочернего компонента сКомпонент приложения, который я использую Context.

Перед тем, как запустить асинхронный запрос в моем дочернем компоненте, я делаю:

this.context.cntLoadingOverlay = true

В своем компоненте приложения я настроил Consumer, подобный этому, для прослушивания.изменения контекста:

               <SSContext.Consumer>
                    {
                        context => {    
                            //Check loading overlay settings
                            if (this.state.loadingOverlay !== context.cntLoadingOverlay) this.setState({ loadingOverlay: context.cntLoadingOverlay });
                        }
                    }
                </SSContext.Consumer>

Но потребитель не запускается после обновления контекста.(Даже в отладчике Rect я могу заметить, что значение cntLoadingOverlay было установлено на true, как и ожидалось)

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

Есть ли решение по поводу того, что я пытаюсь сделать?

это мой App.js

export default class App extends Component {

    static contextType = SSContext;

    render() {

        return <SSContext.Provider value={this.state.contextToProvide}>

                <SSContext.Consumer>
                    {context=>{ console.log('context changed') }}
                </SSContext.Consumer>

                </SSContext.Provider>
    }
}