В чем заключается суть оптимизации скорости обновления компонентов через useReducer?

Kentavr16, а что подразумевают под вопросом, когда речь идет об оптимизации и ускорении реакт компонетов?

В чем заключается суть оптимизации скорости обновления компонентов через useReducer?

Алексей Уколов, там речь шла о том, что под капотом у useState находится useReducer и что некоторые компоненты эффективней ререндерить через редьюсер

Как в NextJS можно работать со стейт менеджером для хранения токена авторизации?

szQocks, ну не он в сторе, а сам юзер появляется в сторе при удачной авторизации и уже при наличии его расширяются доступы на роуты

Как правильно задать тип события мыши?

Спасибо, заменил
const tableWrapper = ref.current as Element | null
на

const tableWrapper = ref.current as HTMLElement | null
function scroll(event: MouseEvent) { ... }

и заработало

Программа не установилась, а установочный файл сам удалился это вирус или особенность Windows 11?

psiklop, там нельзя оставлять комментарии с новым аккаунтом

Как заменить слова в колонке по точному совпадению?

Rsa97, к счастью таких названий не было )

Как заменить слова в колонке по точному совпадению?

Тоже вариант )
А как быть с теми случаями, где речь пойдет не об одном слове, как всему значению столбца, а нужно будет именно в тексте сделать замену по точном совпадению?

Как заменить слова в колонке по точному совпадению?

Rsa97, это не оно, а Information Technology )

Как избавиться от моргания блоков при их смене после подгрузок данных с сервера?

WbICHA, я так понял вы по mobx больше )
А в нем какой инструмент используют для кэшировани данных запросов?
Что-то вроде axios пакета?
Все пакеты, что нашел по похожим словам mobx и request,cache выводят на пакеты с количеством скачиваний в 100 шт )

Почему не работает кэш по умолчанию для useMutation?

chemdev, подскажи пожалуйста, а для чего тогда нужен useMutation, если через useQuery можно все реализовать?

Почему не работает кэш по умолчанию для useMutation?

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

Почему не работает кэш по умолчанию для useMutation?

chemdev,

const [getTable, { data = [], isLoading }] = useLazyGetTableQuery()

function handleClick(url: string) {
   getTable(url)
}

<button onClick={() => handleClick(table.url)}>{table.name}</button>

Почему не работает кэш по умолчанию для useMutation?

chemdev, а сейчас почему кэш не работает? )

export const rootApi = createApi({
    reducerPath: 'root',
    tagTypes: ['root'],
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getTable: builder.query({
            query: (table) => `${table}`,
            keepUnusedDataFor: 120,
        })
    })
});

export const { useLazyGetTableQuery } = rootApi

Почему не работает кэш по умолчанию для useMutation?

chemdev, спасибо, нашел
А mutation получается только для тех случаев, когда нужно исключить кэширование, верно?

Почему не работает кэш по умолчанию для useMutation?

Но мне нужно делать запросы по нажатию кнопки, а query автоматический запускает запрос при рендере
Или как это сделать через builder.query?

Как избавиться от моргания блоков при их смене после подгрузок данных с сервера?

WbICHA, раз уж мы тут собрались )
Подскажи пожалуйста, почему в useMutation кэширование по умолчанию не работает?
В документации написано, что оно установлено по умолчанию, по крайней мере в useQuery, но у меня почему-то каждый раз происходят новые запросы на сервер на одни и те же адреса

export const rootApi = createApi({
    reducerPath: 'root',
    tagTypes: ['root'],
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getTable: builder.mutation({
            query: (table) => `${table}`
        })
    })
});

export const { useGetTableMutation } = rootApi

Как избавиться от моргания блоков при их смене после подгрузок данных с сервера?

WbICHA, как быть со скелетоном, если у меня может загрузка длиться 0.1 сек?
Я так понял речь идет о этом пакете
https://www.npmjs.com/package/react-loading-skeleton
Он мне вернул моргание )

И для корректного отображения копии блока, нужно именно этот способ использовать?
Просто в других я не совсем понял суть с count <Skeleton count={3} />

function Box({ children }: PropsWithChildren<unknown>) {
  return (
    <div
      style={{
        border: '1px solid #ccc',
        display: 'block',
        lineHeight: 2,
        padding: '1rem',
        marginBottom: '0.5rem',
        width: 100,
      }}
    >
      {children}
    </div>
  );
}

// Method 1: Use the wrapper prop
const wrapped1 = <Skeleton wrapper={Box} count={5} />;

// Method 2: Do it "the normal way"
const wrapped2 = (
  <Box>
    <Skeleton />
  </Box>
);

Как избавиться от моргания блоков при их смене после подгрузок данных с сервера?

Михаил Р., спасибо, сработало
Если я правильно понял, то так должно было быть

const currentTable = useRef([])

useEffect(() => {
   if(data && data.length) currentTable.current = data
}, [data])

{isLoading ? createTable(currentTable.current) : createTable(data)}

Как затипизировать массив, который является списком ключей объекта?

WbICHA, спасибо, это решение нравится больше )
Добавь пожалуйста в ответы, чтобы закрыл вопрос

Как избавиться от моргания блоков при их смене после подгрузок данных с сервера?

Не совсем понял, т.е. при запросе getTableсразу удаляются старые данные, что ведет к ререндеру пустоты и после загрузки новых происходит второй?

Убедиться точно, что новый контент загружен и лишь затем его выводить

Мне казалось, что в данном случае логика такая
- делаем запрос, ничего не происходит до ответа
- когда приходит ответ, выполняется первый ререндер
- когда делаем еще один запрос, отображены старые данные и до появления новых в data, ничего не происходит, а после загрузки уже происходит ререндер с новыми
отсюда я пытался исходить из логики, что useLayoutEffectнужно добавить в зависимости data, что позволит избежать моргания

Поправьте пожалуйста в чем я ошибся и почему оно работает не так