1

Не понимаю почему на next 13 версии, react-dom 18, react 18, useEffect срабатывает не при первом рендере. Приходится писать костыли в виде хука useIsFirstRender, для того что бы это работало:

export async function getServerSideProps({ query }) {
    const data = await productListStore.fetchProductsFilters(query)
    productListStore.setProductsFilter(data)
    return {
        props: {
            initialData: data,
        },
    }
}
const function useIsFirstRender(callback = () => {}) {
    const isFirst = useRef(true)

    if (isFirst.current) {
        isFirst.current = false
        callback()
        return true
    }

    return isFirst.current
}
const Page = ({ initialData }) => {
    useIsFirstRender(() => {
        productListStore.setProductsFilter(initialData)
    })
    // render jsx...
}
export default observer(Page)

Может кто подскажет адекватный способ работы с этим, в проекте большое количество сторов.

8
  • 1
    Что такое "регидрация"?
    – ksa
    17 мар в 6:16
  • При вызове метода getServerSideProps данные в стор записываются на стороне сервера. Далее рендериться html на стороне сервера с данными из стора, html летит на клиент. На клиенте уже данных в сторе нет, и необходимо их как то прокидывать повторно в стор, что продемонстрировано в моём примере. На клиенте происходит сравнение, html с сервера и того что отрендерилось на клиенте, расхождений быть не должно. habr.com/ru/post/515100 17 мар в 8:41
  • Меня заинтересовал сам термин "регидрация". Что он означает для тебя?
    – ksa
    17 мар в 8:46
  • В данном контексте, синхронизация начального стейта с сервером. 17 мар в 10:20
  • Стандартно считается нормальным подгружать данные с сервера в хуке useEffect(). Если не указывать список зависимостей - он выполнит функцию один раз при создании, после смонтирования элемента в документ. Чем тебя такой вариант не устраивает?
    – ksa
    18 мар в 16:39

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.