Андрей Пастухов

Вот так можно

Тормозит не ваш код, а codesandbox - он пытается обработать console.log("ymaps", ymaps); - из-за того что ymaps сильно большой и собственной реализации консоли

Замените на console.log("ymaps", !!ymaps);

Может это поможет? (= у вас не правильно {...} и [...] не одно и тоже )

catInfo: state.kittie.filter(cat => catPrice === cat.total)

Так у вас на скрине где then(data => data - это массив, а вы делаете props.test(data.test) - а test не существует, по этому в props.mainPage.messages устанавливается undefined

1) useCallback - эта функция мемоизирует callback по зависимостям в deps. Так что когда пишите в зависимостях пустой массив - то гарантируете что changeDragging будет всегда одной и той же функцией на протяжении жизненного цикла компонента. А это очень важно когда нужно вашу changeDragging передать как props в компонент ниже - т.к. одна и та же зависимость. changeDraggingToTrue зависит от changeDragging - так что в правилах хорошего тона changeDragging нужно указать как deps второго useCallback. Но так как changeDragging уже гарантирована неизменность, то можно и не указывать changeDragging как зависимость - ничего не поменяется (= до поры до времени)
2) это вкусовщина () => ... или _ => ...

нужно как-то защититься, т.к. при первом рендеринге у вас info === null
<p>{info?.releaseyear} — {info?.title}</p>

или
{info && <p>{info.releaseyear} — {info.title}</p>}

1) changeBurger заверните в useCallback

const changeBurger = useCallback(() => {
  setBurgerState(!burgerState);
}, [burgerState]);

2) Судя по доке OutsideClickHandler - есть пропс disabled, который должен помочь

Похоже что у вас MobX версии 6, а для него в конструкторе требуется навесить makeObservable(this) или makeAutoObservable(this) подробнее тут

Так что у вас 2 варианта:
1) Даунгрейдить MobX на 5 версию
2) Использовать в конструкторе makeAutoObservable(this)

У чекбокса нет текста, есть только value значение

render() {
        return(
          <div>  
            <input onClick={this.changeTitle} type='checkbox' value={this.state.clicked} />
            {!this.state.clicked ? 'lf' : 'ytn'}
          </div>
        )
    }

const req = await axios.get(
  'http://api',
  { headers }, // <-- скобки
 );