Мои любимые паттерны для full-stack и frontend-проектов

для таких фабрик ключей для Tanstack есть удобная реализация

function createQueryKeyFactory<

TBase extends string,

TKeys extends Record<string, (...args: any[]) => readonly unknown[]>,

>(base: TBase, keys: TKeys) {

const all = [base] as const;

const factory = {

all,

...Object.entries(keys).reduce(

(acc, [key, fn]) => {

acc[key] = (...args: Parameters<typeof fn>) =>

[base, ...fn(...args)] as const;

return acc;

},

{} as {

[K in keyof TKeys]: (

...args: Parameters<TKeys[K]>

) => readonly [TBase, ...ReturnType<TKeys[K]>];

},

),

} as const;

return factory;

}

Хватит неправильно использовать localStorage в React

Работа с готовым решением везде +/- будет выглядеть так. Статья больше про работу с нативным браузерным апи без molосипедов. Каждый раз смотря на синтаксис чувствую себя Индиана Джонсом в египте

Любимая задачка на знание React

Почему именно задача про загрузку данных? Рассматривали ли вы задачи связанные с context и его особенности ре-рендера? Сколько не посещал таких мероприятий почти всегда было "напишите ка нам хук, где нужно данные получить"