Как обновить компонент при помощи useState в колбэке ajax запроса?

Question

[mletov]

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

1) Есть 2 компонента: родительский и дочерний. Оба компонента функциональные.
2) В родительском есть кнопка, по которой
- отправляется ajax запрос
- в колбэке ajax запроса прилетевшее с сервера значение пишется в переменную dataSource через useState.
- эта же переменная dataSource используется как входной параметр для дочернего компонента и внутри него выводится через props.

Естественно, хочется чтобы компонент после нажатия кнопки и получения значения с сервера обновлялся.
Но он обновляется только после второго нажатия на кнопку и с предыдущим значением.

Аналогичный компонент с синхронным изменением входных параметров обновляется без проблем.

Для запроса использую axios, но, думаю, это неважно.

Почитал, пишут, что это происходит потому, что useState асинхронный, рекомендуют использовать componentWillReceiveProps(), но у меня все компоненты функциональные. Пробовал аналог componentWillReceiveProps для useEffect, что-то не работает.

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

https://codepen.io/mletov/pen/QWpxRRL

Comments

[Aetae]

Код то покажи.

[Mikhail Osher]

Пример на codesanbox

[mletov]

Aetae Mikhail Osher xenonhammer

Спасибо за отклик. Сделал рафинированный тестовый пример в песочнице - а он работает. Видимо, дело не в React, а в компонентах PrimeReact, которые я использую. Буду дальше копать.

Пример добавил. Только на продакшене он как бы отстает на одну итерацию. Если нажать кнопку 1, то визуально ничего не изменится, если нажать кнопку 2, то выведется значение, которое было получено по нажатию кнопки 1. Т е всегда выводится предыдущее значение.

Answer 1

[xenonhammer]

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