Apollo Client. Теперь — с хуками React

Там есть плагины как для бэка, так и для фронта. React + Apollo. На выходе будут тайпскрипт типы для Graphql + готовые компоненты\хуки для всех query и mutation.

Apollo Client. Теперь — с хуками React

Используем на проекте GraphQL Code Generator, полёт нормальный

Анимированное руководство по базовым механизмам React

Задепрекейчены только componentWill{Mount,ReceiveProps,Update}, классы никуда не уходят.

Неожиданный порядок инициализации наследованных классов в JavaScript

Они не просто инициальзируются в разном порядке, первый вариант — это объявление метода. Этот метод попадает в прототип. Второй вариант — объявление поля, в которое записывается фунция. Это поле инициализируется в каждом экземпляре класса. Из чего следует еще один забавный момент: если попытаться унаследоваться от такого класса, то через super, такая функция доступна не будет.

Валидация по TypeScript interface с использованием Joi

В порядке бреда можно полностью вывести тип валидатора из произвольного типа

type Username = string;
type Age = number;
type PhoneNumber = string | number;

interface IUser {
    name: Username;
    age: Age;
    phone: PhoneNumber;
}

type UserJoi = JoiValidtor<IUser>;
/**
 * name: Joi.StringSchema;
 * age: Joi.NumberSchema;
 * phone: Joi.AlternativesSchema;
 */

JoiValidtor

type ValidatorGuard<T, TARGET_TYPE, VALIDATOR_TYPE> = T extends TARGET_TYPE
    ? VALIDATOR_TYPE
    : never;

type JoiRecord<T> = {
    [K in keyof T]: JoiValidtor<T[K]>
}

type JoiValidtor<T> = IsUnion<T> extends true
    ? Joi.AlternativesSchema
    : ValidatorGuard<T, string, Joi.StringSchema>
    | ValidatorGuard<T, number, Joi.NumberSchema>
    | ValidatorGuard<T, object, JoiRecord<T>>;
// Дописать сюда и все остальные типы

Черная магия isUnion

честно подсмотрено здесь.

type UnionToIoF<U> =
    (U extends any ? (k: (x: U) => void) => void : never) extends
    ((k: infer I) => void) ? I : never

type UnionPop<U> = UnionToIoF<U> extends { (a: infer A): void; } ? A : never;

type Prepend<U, T extends any[]> =
    ((a: U, ...r: T) => void) extends (...r: infer R) => void ? R : never;

type UnionToTupleRecursively<Union, Result extends any[]> = {
    1: Result;
    0: UnionToTupleRecursively_<Union, UnionPop<Union>, Result>;
}[[Union] extends [never] ? 1 : 0];

type UnionToTupleRecursively_<Union, Element, Result extends any[]> =
    UnionToTupleRecursively<Exclude<Union, Element>, Prepend<Element, Result>>;

type UnionToTuple<U> = UnionToTupleRecursively<U, []>;

type IsUnion<T> = UnionToTuple<T> extends [any, any, ...any[]] ? true : false

Отображение и оптимизация вывода на терминал в вебе

А вы пробовали спользовать виртуализацию скролла? Должно помочь с производительностью в случае такого количества строк.

Прокачиваем React хуки с помощью FRP

Я не совсем понял, а зачем использовать useEffect для загрузки данных в этом случае? Почему бы просто не сделать так:

const App = () => {
  const [name, setName] = useState('');
  const [result, setResult] = useState();

  const clickHandler = useCallback(() => {
    fetch('//example.api/' + name).then((data) => {
      setResult(data.result);
    });
  }, [setResult, name])

  return <div>
    <input onChange={e => setName(e.target.value)}/>
    <input type="submit" value="Check" onClick={clickHandler}/>
    { result && <div>Result: { result }</div> }
  </div>;
}

Функциональные компоненты с React Hooks. Чем они лучше?

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

const [state, setState] = useState(0);

useEffect(() => {
  setState(state + 1);  // setState(0 + 1)

  asyncAction().then(() => setState(state + 1); // setState(0 + 1) state все еще 0
});

useEffect(() => {
  setState(st => st + 1);  // setState(0 + 1)

  asyncAction().then(() => setState(st => st + 1); // setState(1 + 1) state уже обновился
});

Функциональные компоненты с React Hooks. Чем они лучше?

А вы пробовали передавать в setState функцию вместо значения? Это позволяет избавиться от замыкания данных.

function updater(item) {
  return items => ([...items, item])
}

const [data, setData] = useState([]);

useEffect(() => {
  // ...
  fetchItem()
    .then(item => setData(updater(item)));
  // ...
}, [setData, /* ... */]);

Вообще говоря, в случае с классами тоже можно было попасть на такие проблемы, если распаковать props/state через дестуктуризацию, а потом замкнуть их в коллбэке.

Заблуждения игроков при оценке рисков. Контроль генератора случайных чисел в разработке

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

Почему у React элементов есть свойство $$typeof?

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

Разработка React-приложений с использованием ReasonReact

Технически, для обеспечения иммутабельности, можно использовать Object#freeze. Хотя конечно это все равно не будет работать с вложенными объктами по-человечески.

CSS Grid — швейцарский армейский нож для макетов сайтов и приложений

На самом деле, IE поддерживает CSS Grid, но только ограниченно (старая версия спецификации) и под префиксом. Если не использовать возможности автоматического позиционирования, то большую часть поведения можно эмулировать, включая grid-template-areas.