React.js — 5 вещей, которые могут вас удивить

[Alexandroppolus]

Во втором поинте строка const dogRef = useRef(new Dog()); не совсем хорошая - будет каждый раз вызываться конструктор, хотя сохранится только первый экземпляр. Обычно делают const [dogRef] = useState(() => new Dog());, либо пишут подобный хук-обертку над useRef, чтобы мог так же принимать функцию. useMemo для подобного не подходит, это ненадежное хранилище, если верить доке.

Трюк с key применял (чтобы предотвратить ненужную анимацию). По сути, поинты 2 и 3 - это просто пример использования key и useRef, чуть менее банальный чем обычно.

Остальное прописано в доке, и к счастью работает именно так, как мы ожидаем.

[SeokkySss]

Спасибо за интересные замечания, дополняющие оригинальную статью!

[alexesDev]

Да, перечитывание FAQ в документации часто удивляет...

[Sadler]

Я до сих пор не вижу области применимости useRef для хранения произвольных данных. Когда это может быть оправданно вместо useState или mobx storage? То есть, инстанс класса я ведь могу запихнуть и в любой другой стор, зачем абузить useRef?

Про api с Children, действительно, не знал, использовал typescript, чтобы ограничить число дочерних компонентов или заранее знать, пришёл массив или нет. Наверное, с api должно быть удобнее, спасибо.

[zhenkuzne]

Если не нужно перерисовывать компонент при изменении этих произвольных данных, самый частый пример - записать timeoutID при вызове setTimeout, чтобы потом его очистить.